Tag Selectors

Tag selectors are the simplest selectors. They are just the text-part of the HTML tag whose style is being defined. In general however, a selector is so-named because it is used to select or target a part of the web-page with its styles. It can also be compounded with other terms to provide for more selective targeting.

It is the left-most part of a style expression, up to but not including the first curly bracket.

A simple style with a paragraph tag's selector looks like this:

and the above style could be applied automatically to all simple paragraphs on a web-page. Sometimes the selectors are grouped to save typing; then the same styles can be made to apply to the entire comma-separated group, like this:

When we intend to write declarations for every tag on the page, we can use the universal selector, the asterisk, like this:

We can also conditionally style paragraphs. If the styles were to apply only when the paragraph tags are nested within div tags, we could write the selector for that as:

Class Selectors

A class-selector is a selector that is allied with a class; that is, a complete set of styles. To use it the class name must be declared within the associated tag. It has more specificity than a simple tag selector, but less than an ID selector. The class can be used as many times as necessary throughout a page, and several classes can be declared within one element. In the style-sheet we could define the class with say;

And to apply these styles to say, a paragraph tag in a document we can write the declaration in the document as:

When the following two classes are declared together in the same element, the styles of the two individually defined classes will be merged:

If the selector is written as shown below, the styles will be applied only to elements where both classes are declared:

ID Selectors

These should only be used once in a page, and only one can be declared within an element. They have the greatest specificity, second only to in-line styles. A typical id definition can be written in the style-sheet as:

and we declare the ID for use in the document with say;

Contextual Selectors

These describe the styles to apply when tags are nested within one another. In this example the selector will only apply to paragraph tags that are nested within division tags. For that we write:

and it would be applied when the tags in the document look something like this:

Combining a few of the above ideas, here are the styles for the same nested paragraphs, but now one has declared a class and the other an ID:

Attribute Selectors

These are selectors that have an attribute in square brackets modifying their action in a conditional way. To color all items with a title of "CSS Work" we might write in the style-sheet:

To select any element with the sub-string able in the value of its title attribute, we write:

Other attributes might include alt, class, id, lang, style, title,and html attributes such as align, cellspacing ect.

Pseudo Classes

These are classes that condition behavior, like that of selecting links on the page. We might write:

Pseudo Elements

These are elements that can access such features as the 'first-line' and 'last-line' of paragraphs, and that allow additional control in the page. For example, they also allow the targeting of the first cell in a row, or every even or odd row.

To make the first letter of all paragraphs bold, we could write:

The first of type pseudo element selects the first child element of its parent that matches the construct. For example, to make the entire first columns of all tables bold we could write the selector as:

The last of type pseudo element selects the last child element of its parent that matches the construct. This selector draws a totals line above the last row of tables declaring the totals class:

The nth child and nth of type pseudo elements can used to selectively target elements by pattern. This first example below colors every odd row of every table:

This next example colors every table's even rows.

The third example shows the general form for table row coloring; this case colors every third row starting with row number two:

To color even columns, two pseudo elements can be compounded as follows. This example colors every even cell in every row of every table. Both of these parts could take more complex arguments.

Important styles

These are declarations in user, author, or any other style-sources with high priority. See page for details:e.g.

Nested elements are elements whose opening and closing tags are themselves bounded by a complete set of other tags. The examples below will make the matter clear. The html code below is used for demonstration. In it there are many nested tag-sets (representing elements). For example, the table is completely nested within a pair of division tags, and all of that is completely nested between a pair of body tags.

The notion of nesting is not limited to adjacent tag pairs. That is to say, in the above example, the table is also considered to be nested within the body tags, despite the fact that the division tags are located between them. In determining which selectors might apply to a particular tag in the document, the browser gives consideration to the nest in which the tag is located. In the example below it is assumed that the browser is attempting to find the relevant nested tags for the first heading tag, h2.

Figure 1: An HTML extract to show nested tag pairs.

<!--  Sample html code for the nesting example 
Go to the examples below for an explanation -->
  <body>
    <div>
        <h2>First Heading</h2>
        <p>First paragraph</p>
        <table>
          <th>Column 1 Heading</th><th>Column 2 Heading</th>
          <tr>
          <td>Cell 1 text</td><td>Cell 2 text</td>
         </tr>
        </table>
    </div>
    <h2>Second Heading</h2>
    <p class="class1">Second paragraph</p>
    <ol>
      <li id="id1">First list item text
      <li>Second list item text
    </ol>
  </body>

Figure 2: This diagram shows the possible selectors as nodes. It follows the extract of Figure 1. Notice that where declarations exist there are two possible routes to specifying selectors, one for the tag with the declaration and one without.

Usually, with practice, the web-page builder can see the relationships within the tag sets by simple inspection, but here the nested tag pairs will be listed and explained. In the extract above, the h2 tag that is nested within a division has four possible nestings, and these imply that there are four possible ways to write selectors that include that tag. That is to say, on its own or set at least somewhere between complete tag pairs.

In Figure 2 can be seen all of the possible selectors that could apply to the extract of Figure 1, with the exception of those that include the universal selector and the omitted root element <html>. Any selector that works at all can be made by joining a trail of selectors that ends with the target tag. The set that is produced should be space-separated, but need not include any more that is needed to obtain the required specificity, and any tags within the sequence could be omitted. The examples below show the simple selectors that might be written for the first heading tag of Figure 1:

The four case are:

1. The trivial case... The tag on its own... Selector h2 itself would contain a relevant styles listing, and this general selector affects the second heading as well.

<h2>First Heading</h2>

2. Nested within the div tags... Selector div h2 would contain a relevant styles listing, and because the second heading is not nested within a division, this selector affects only the first heading.

<div>
        <h2>First Heading</h2>
</div>

3. Nested within body and div tags... Selector body div h2 would contain a relevant styles listing, and again, because the second heading is not nested within a division, this selector affects only the first heading <body> <div> <h2>First Heading</h2> </div> </body>

4. Nested within body tags... Notice that even with intermediate tags ignored, that this is considered nesting too. Selector body h2 would also contain a relevant styles listing, and because both headings are nested in the body, it affects them both. <body> <h2>First Heading</h2> </body>

The addition of classes and id declarations to the target tag would allow for more specific targeting of styles, perhaps avoiding any confusions that might otherwise arise. Doing so also greatly increases the number of ways to specify selectors. The section below provides an example that includes such declarations. In the interests of learning, it lists a few of the selector formats that could be encountered for a typical paragraph tag, though not all of these are the best choices for doing so.

Figure 3: An HTML extract for the example with declarations.

<body id="topid">
<p>textA</p> 
<div>
  <p id="someid" class="class1 class2" style="color:blue;">textB</p>
</div>
</body>

Figure 4: This diagram shows the possible selectors as nodes. It follows the extract of Figure 3. Notice that where multiple declarations exist they can be combined to produce more complex selectors. Most of these would never find use in practice.

Figure 3 shows a fairly usual arrangement of tags where a paragraph is nested within a division tag set, and all of that is assumed to be within the body tags of the web-document. In addition, note that there are declarations within the paragraph tag; one id, two classes and an in-line style. The division tag has declared an id within it. The addition of these declarations allows a large number of variations in the available selectors for the second paragraph, though from the theoretical sixty-four variations, only about twenty or so will ever find much use.

Notice also that there is another paragraph tag, but it belongs to a different nest. It is simply nested within the body tags and has no connection with the division tag pair. When styles are written for paragraphs, some styles will affect both of these paragraphs and others will affect only one or the other.

Refer to Figure 3. Any or all of the following selectors could be used to list styles for the second of the two paragraphs, the one with all the declarations. A note is provided for the cases where the first paragraph tag would also be affected.

p

A general paragraph selector. Also affects the first paragraph. Specificity=1.

div p

For a paragraph within division tags. Specificity=2.

body p

For paragraphs within body tags, where there is optionally some tag(s) in between. Also affects the first paragraph. Specificity= at least 2.

body * p

For paragraphs within body tags, where there is necessarily some tag(s) in between. Also affects the first paragraph. Specificity=2.

body div p

For paragraphs within division tags and the division tags themselves within body tags. Specificity=3.

.class1

For any element that includes the declaration class= ”class1”. Specificity=10

.class2

For any element that includes the declaration class= ”class2”. Specificity=10

p.class1

For a paragraph that includes the declaration class= ”class1”. Specificity=11

p.class2

For a paragraph that includes the declaration class= ”class2”. Specificity=11

.class1.class2

For any element that has a declaration class= “class1 class2”, with both together. Specificity=20

p.class1.class2

For a paragraph that has a declaration class= “class1 class2”, with both together. Specificity=21

div p.class1

For a paragraph with declaration class="class1" that is nested within division tags. Specificity=12

div p.class2

For a paragraph with declaration class="class2" that is nested within division tags. Specificity=12

div p.class1.class2

For a paragraph with declaration class="class1 class2" that is nested within division tags. Specificity=22

body div p.class1

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1”. Specificity=13.

body div p.class2

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class2”. Specificity=13.

body div p.class1.class2

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1 class2”. Specificity=23.

body p.class1

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1”. Specificity=12.

body p.class2

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class2”. Specificity=12.

body p.class1.class2

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1 class2”. Specificity=22.

#someid

For any element with a declaration id= “someid”. Can be declared only once on the page and an element can list only one of them. Specificity=100

#topid p

For a paragraph that is nested within any element with a declaration id= “topid”. Optionally, there could be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects both paragraphs in this case. Specificity=at least 101

#topid * p

For a paragraph that is nested within any element with a declaration id= “topid”. Necessarily, there must be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects only the second paragraph here. Specificity=101

*

Every element that is capable of displaying the added styles. Affects both paragraphs. Specificity =0

An in-line style within the paragraph tag

Where a paragraph contains a style declaration. Specificity=1000

The inheritance of styles means the use of styles from a parent element when suitable styles have not been specified for the child element. The inheritance of styles takes place after the cascade, filling in the missing property values where possible, and when this cannot be done, by applying initial values, default values for the CSS properties themselves. Note the following points:

• A parent element is any element whose tags totally enclose another set of tags, the tags of the so-called child element.
• Inheritance takes place from a parent element to a child element, if at all, and can be transferred to any depth of nesting where the child of one becomes the parent of the next.
• The calculated values of the previously established cascaded values are inherited and not the properties themselves. Because the cascaded values no longer have any importance rank or specificity associated with them, these factors have no bearing on inheritance either.
• If the child element has a relevant style specified for it then the parent cannot pass styles to it by inheritance.
• Even an HTML attribute can block inheritance if it exists as a relevant style in the child element. This occurs because attributes are given equivalent CSS formats to act in the cascade. They do so within the browser style-sheet.
• The initial values of CSS properties do not take part in the cascade. After the cascade, if no style was specified, then an attempt is made to solve the problem by inheritance, then if that is still not possible, the initial value as found in the CSS Property Definition Table is used. Reasons why an initial value may be taken include:
  • The property is not specified and cannot in any case be inherited
  • The property value is present but it's value is set to initial .
• <!DOCTYPE html> for HTML5 Standard is assumed. These notes will apply to web-documents whose top-line entry matches the one here. For certain other doctypes the inheritance of property values might fail entirely.

The examples below help to explain the basic points.

Inheritance takes place as a part of default actions, after the cascaded values have been resolved. This assumption makes the writing of examples difficult. Therefore, the reader should assume that the styles shown in the examples below have already been resolved by the cascade as being valid for these elements.

<!-- Figure 1 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div>   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 1. In the case above the paragraph font-size and line-height will be the same as for the body tag. In this case the div tag inherits from the body tag since the div has no such properties specified. The paragraph inherits from the div for the same reason.

When specified at a given level, relative line-height is always calculated as a multiple of the same element's calculated font-size, but where line-height is inherited, the calculated value of line-height of its parent is used. The next example illustrates this. Relative font-size is always calculated as a multiple of the parent's calculated font-size.

The line height will be applied as a value as close as possible to its calculated 24px, (16px x 1.5).

<!-- Figure 2 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div style="font-size:1.25em; line-height: 1.6em;">   
        <p style="font-size:1.5em;">  /* inherits calculated line-height value as 32px */               
              This is the test paragraph
        </p>
      </div>
   </body>
</html>

Refer to Figure 2. In this slightly more complex case the div's calculated font-size is 20px and based on this, the font-size for the paragraph is calculated to be 30px, (16px x 1.25 X 1.5 = 30px)

The line-height for the paragraph is inherited from the div element, since it has no such style of its own, but it is not the 1.6em that is inherited but the calculated value of line-height as it exists for the div.

The paragraph's font-size is then 30px and the line-height becomes a mere 32px, (16px x 1.25 x 1.6 = 32px).

<!-- Figure 4 -->
<!-- Assume that the browser default font-size is 16px  -->
<html>
   <body style="font-size:1.5em;"> 
      <div style="font-family:Garamond; font-size:1.5em;">   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 4. In this example the paragraph's text will be styled in Garamond face, with font-size 36px. Attempts by the div level to inherit a specific value for the font size fails, since neither div or body tags hold a font-size measurement. The initial value however, as set by the browser's default options is 16px and this value is taken by the body tag to make its calculated value 24px. In turn, the div tag inherits 24px and then calcuates its own to be 36px. The paragraph inherits the values Garamond and the 36px from the div tag.

Figure 5: A methodical approach to determining inherited values.

The estimation of inherited values is complex for a web user, but it is rarely needed where styles are fully specified. For a browser, the matter needs to be a more methodical process.

Refer to Figure 5 for a strategy chart for such a process. After the cascade has run its course, the inheritance run then starts at the outermost tag of the document tree and works inward toward the target tag. The outermost tag that could contain a style is the html tag, the next is the body tag, and so on, and any of these tags could be required to contribute styles through inheritance.

Recall that inheritance can propagate from the parent element to the child element only if the child element has no cascaded style for that property of its own. When there is no such style but inheritance is still not possible, then the initial value for that property is taken instead. For example, this might happen in an HTML element that has no font-size declared, either in style-sheets or on the page. The initial value for font-size would be used, and might even be inherited by nested elements. All CSS properties have initial values as defaults, written into a Property Definition Table as a part of the browser's design process.

With such a model either the cascaded, inherited, or initial values will be assigned during any one iteration of the loop. In a practical situation there would not be a single run but several, not just to the deepest target, but including all of the side runs also. Nor would there be just one CSS property that is of interest, but rather all of the properties that can apply to that element. The scenario that perhaps serves best to understand the scope of what is done, is to imagine dozens of properties being considered at the same time at every iteration, then several more passes to get the rest.

When a style-sheet finds an error, it tends to ignore the feature in which it is found.

• If the selector is illegal : This might happen if some character in it is not permitted by the CSS standard. If that happens then all of the styles in the declaration block associated with it are ignored. Parsing continues with the next valid selector.
• If the declaration block is malformed: For example, there might be a missing opening bracket. When this happens the entire declaration block is ignored. Parsing continues with the next valid selector.
• If an illegal property is found: For example, there might be a misspelling. The entire declaration is ignored. Parsing continues with the next valid declaration in the same declaration block, or the next selector.
• If there is an illegal value : As in the property case, the entire declaration is ignored and the parsing continues with the next valid declaration in the same declaration block, or the next selector.
• If a semicolon is missing from the last declaration in a declaration block: The styles are unaffected.
• If a semicolon is missing from any other declaration in a declaration block: The style with the missing semicolon and the one that follows it will be ignored. Parsing continues with the next valid declaration after those two, or the next selector.

In-line styles are parsed in the same way as style-sheets, so the second of two contesting styles applies. Problems mostly arise when the parentheses are missing:

• Removing the parenthesis from the end of the block: This can cause a paragraph to vanish completely! This can be demonstrated using the in-line style for the first paragraph of the example in the main page.
• Removing the leading parenthesis: This causes more strange behavior - the first declaration of the two is applied but not the second.
• If two in-line style blocks exist: The second is ignored.
• A missing semicolon at other than the end of the declaration block: This causes the declarations on both sides of the missing semicolon to be ignored.
• A missing semicolon at the end of the last declaration: Has no effect on the styles.

Comments can be added to the style-sheet as follows:

 /*  This is my style-sheet user.css              
 These are comments and they are ignored by the parser. 
 Notice that the outside bounding characters are forward slashes,
 and that there are asterisks on the inside of each  */

p{
font-size: 30px;   /* this is also a valid comment */
}

/* comment characters can also be used to temporarily disable css styles for testing */

Comments for HTML are different from the ones for CSS style-sheets. Comments are added to HTML with:

 <!--  This is an HTML comment and it is ignored by the parser. -->
 <!--   Notice the form of the leading and end symbols   -->

White-space in style-sheets is largely ignored, so the layout can be spaced for ease of reading. Here are a few of the more obvious points.

• White-space can surround properties, values, selectors, declaration blocks, and whole style-rules.
• Individual words such as in properties, values, and selectors, should not be broken with space or line breaks.
• Line breaks are not permitted within individual style declarations, though breaks between complete declarations are to be expected.

• Declarations should not be broken with line breaks. The need for this rarely arises when a neat layout has been adopted.

When a style-sheet is referenced in the head section of a web-document, there are certain assumptions that can be made:

• If no path other than the file name is given, the browser can assume that the style-sheet is to be found in the same folder as the web-document itself.
• If a full path is given, in the case of Opera, spaces are tolerated in the folder names. In the event that a browser objects to spaces, then replacing the spaces with %20 will solve it.
• A local path can be given for a style-sheet on the local computer.

Any number of style-sheets can be added to a web-page by making a separate link reference for each in the head section of the page. With the @import directive, additional style-sheets can be added to the linked style-sheet itself.

That is to say, any of the style-sheets listed in the head section of the document can themselves import further style-sheets. In practice this means placing a separate @import directive for each additional style-sheet, at the top of the linked style-sheet. For example: these three additional sheets will be merged with the one in which they are mentioned:

@import "first.css";
@import "second.css";
@import url('http://help.opera.com/css/styles.css');

/*   This is main.css, the sheet referenced in the web-page's head section */

body{
font-size:1em;
}

/*    etc...   */

Note the following:

• There can be no typing above the import directives, but a blank line is permitted.
• The parentheses are optional for Opera but some browsers like Internet Explorer might expect them.
• A semi-colon after each import directive is essential.
• The style-sheets will run in sequence "after" the sheet in which they are listed.
• Entries without a path will be assumed to be located in the same folder as the web-document itself.
• Optionally, the url format can be used to import a known style-sheet. See the third example above, and notice that it has single quotes.

Before the introduction of CSS style-sheets the formatting of web page elements was carried out with so-called HTML attributes. These are basic style rules, and the set differs for each HTML element. In the absence of any author and user CSS styles, the formatting of a web page is handled by a combination of:

• The browser's default CSS style-sheet, (or built-in style set).
• Any HTML attribute inheritance or CSS inheritance that may still apply.
• Settings in the browser's preferences (options).
• The HTML elements' attribute default values.
• HTML attribute values purposely written into the HTML tags.

The formats STYLE=, ID= and CLASS= are themselves HTML attributes that allow the assignment of CSS styles to HTML tags. That is to say, when we write in-line styles into an HTML tag, or declare an id or class, we use HTML attributes to do it.

Although the above list has only one CSS source mentioned (the browser's default style-sheet), it is convenient to think of most of these items as comprising the default browser set. In fact, some developer utilities such as Opera Dragonfly list the equivalent CSS properties of added HTML attributes as if they had originated in the browser's default style-sheet. For example, where there is an attribute entry align=center, it is implied as having been written in the default style-sheet as text-align:center. Additionally, the same utility lists font details from the browser preference settings as though they had also originated as CSS code within the browser's default style-sheet. Most of the time this will not pose any problems for understanding, but it is as well to bear it in mind where there is confusion.

Attribute values as well as CSS values can be propegated to child levels by inheritance. For example, align=center within a tag at any parent level will affect paragraphs at levels far below, assuming that the paragraph has no such style of its own.

Because HTML attributes and CSS styles might still be found together in web pages it is as well to comment on their relative precedence in use. CSS values supersede simple HTML attribute values when they apply to the same style on the same element. In fact, it is only when no CSS style has been expressed that an HTML attribute could apply its formats.

Because of these priorities it may be incorrect for developer tools like Opera Dragonfly to treat attributes as though they were part of the browser's default style-sheet. Clearly even a default browser's CSS style should override an attribute. These priorities are difficult to test in the absence of access to a browser's default sheet, but fortunately the number of situations where confusion might arise are becoming vanishingly small.

Until recently, some HTML attributes had been easier to apply than CSS, but increasingly, CSS styles are being introduced to fill the gaps. For example, the alignment of block elements at a page's center with the HTML attribute expression align=center can now be done with the CSS declaration margin:auto, and recent versions of CSS now allow for the convenient merging of table cells. For those who do not have access to the style-sheet (users of Wiki), and who need to apply padding for table cells, there seems to be no substitute for the table-level HTML attribute cellpadding=length, or endlessly adding padding to every cell. With each new version of HTML, various attributes fall into disuse, for example, the attribute align becomes unavailable in HTML5.

Although the CSS cascade applies only to the resolution of CSS styles, unless regard is also given to these additional default sources, the user will be denied a full understanding. Listings of HTML attributes and their element defaults are to be found in texts on HTML code itself, and will be found to vary between the HTML versions.