Selector Sampler

syntax for a standard selector

Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements:

• A type selector, for specifying which tags in the document the style applies to;
• A style declaration, defined within brackets, for specifying which style to apply to the selected tags. The declaration, in turn, is made up of:
  • one or more property(-ties), followed by the character ":" (a colon),
  • one or more value(s) associated with each property, surrounded by quote marks and separated by commas if there are multiple values, all followed by a semicolon.

As an example, the following syntax defines the style to apply to hyperlinks (<a> tag), specifically Verdana font, 18 pixels in size, bold and in yellow:

A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}

multiple selector

You can apply a style to multiple tags, by separating the names of these tags with a comma (,). The syntax of such a selector, called a multiple selector, is:

type-selector1, type-selector2 { /* style */ }

contextual selector

A contextual selector is a combination of several simple selectors. It define styles that are only applied when certain tags are nested within other tags.

table p { font-size : smaller }

The browser will apply the style if it ever encounters a <p> tag nested somewhere within a <table> tag, regardless of the intermediate tags between the two.

contextual selector - child

If you want to specify that only those elements that are direct descendants (which is to say, first generation children) of a prior tag are to be selected, then you use the child selector. The child selector is indicated with the greater than sign, or open bracket (>). The child selector only selects an element if it is the immediate child of another element. For instance:

ul > ol { ... }

This would only select ordered lists that were nested inside unordered list items. If you had an ordered list inside an ordered list which itself was inside an unordered list, then the inner ordered list would not be affected by this rule (it is the child of another ordered list), although the outer ordered list would (it is the child of an unordered list).

explain when to use a class and when to use an id

There are two types of selectors - id and class. According to css standard, defined id has to be used once per document where as class can be used multiple times in a document. Design will look as expected even if you use selector id more than once but errors will be reported when you validate the design through css validator.

universal selector

The universal selector, *, is very useful because it matches any element. It is useful for many things, particularly in user preferences for fonts or, colors: for example,

blockquote { /* This matches the blockquote element */
color: white;
background: blue none;
}

blockquote * { /* This matches any element inside blockquote */
color: white;
background: transparent none;
}

adjacent sibling

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following,” so there can be no elements between the sibling elements. The combinator in an adjacent sibling selector is a plus character (+), as shown in this example:

h2+p {
? declarations
}

Applying the above selector to this block of HTML may make things clearer:

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above does not match this paragraph.</p>

attribute selector

An attribute selector will target a specific element if the selector matches the element or if some specified attribute condition is met. Attribute selector values are given in square brackets, [like this]. If you write an attribute selector rule where the selector matches the element, it might look like this:

img [title] {
some rules here;
}

pseudo classes

The link pseudo class selector lets you select links in a number of different states. Links can be normal (the usual state of an unvisited link), visited, hover (when the cursor is over them) or active (while they are being clicked).

The selectors for each of the pseudo classes have the following forms

• the selector for normal links is a:link
• the selector for visited links is a:visited
• the selector for hover links is a:hover
• the selector for active links is a:active

a { }
a:link { }
a:visited { }
a:hover { }
a:active { }

other pseudo-class

The : first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

<html>
<head>
<style type="text/css">
p:first-child {color:blue}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

pseudo-elements

The : first-line Pseudo-element

The "first-line" pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):

p:first-line {color:#ff0000; font-variant:small-caps;}

The : first-letter Pseudo-element

The "first-letter" pseudo-element is used to add a special style to the first letter of a text:

p:first-letter {color:#ff0000; font-size:xx-large;}