How to Style Multiple Sections of an HTML Document Using CSS [cont.]

Document Tree Pseudo Classes

The HTML document tree is a standard object model and programming interface for HTML. It defines the HTML elements as objects, properties of all HTML elements, methods to access all HTML elements, and events for all HTML elements. You can control and style different elements in an HTML document tree using CSS pseudo-classes.

CSS2 supports different pseudo classes for a HTML document tree like :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n).

The :first-child pseudo class selector selects the elements that are the default among a set of similar elements. For example,

ul li:first-child {color:brown;}

would make the first <li> tag found within <ul> brown color.

Similarly, the:last-child pseudo class selector selects the elements that are the last child or its parent. For example,

ul li:last-child {background-color:pink;}

would make the last list item in an unordered list have blue text and background color pink.

Example:

Here is an example to illustrate the uses of :first-child and:last-child pseudo-classes in an HTML document.

CSS code:ul li:first-child {color:brown;}
ul li:last-child {background-color:pink;}

HTML code: <ul><li>This is the first child of unordered list </li>
<li>This is the second child of unordered list </li>
<li>This is the last child of unordered list </li></ul>

Demo:

The:first-of-type pseudo-class selector selects the element that is the first child of its parent that is of its type. Similarly, :last-of-type selects the element that is the last child of its parent that is of its type. For example

p span:first-of-type {color:red;}
p span:last-of-type {color:green;}

would set the first <span> tag found in the paragraph to red and the last <span> tag found in the paragraph to green.

The:nth-of-type(n) pseudo class selector selects the element that is the nth child of its parent that is its type. Similarly, :nth-last-of-type(n) selects the element that is the nth from last child of its parent that is its type. For example,

p span:nth-of-type(3) {color:brown;}
p span:nth-last-of-type(2) {background-color:pink;}

would set the third <span> tag found in the paragraph to brown and the second-to-last <span> tag background-color pink.

Example:

Here is an example to illustrate the uses of :first-of-type, :last-of-type, :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes in HTML document.

CSS code:p span:first-of-type {color:red;}
p span:last-of-type {color:green;}
p span:nth-of-type(3) {color:brown;}
p span:nth-last-of-type(2) {background-color:pink;}

HTML code:<p><span>It is first paragraph is red</span><br/>
<span>It is second paragraph </span><br/>
<span>It is third paragraph is brown </span><br/>
<span>It is fourth paragraph is pink </span><br/>
<span>It is fifth paragraph is green</span></p>

Demo:

The:only-child pseudo-class selector selects the element if it’s the only child of its parent and:only-of-type selects an element if it’s the only child of its parent with its type. For example,

span:only-child {color:blue;}
p:only-of-type {color:purple;}

The first line would set the color of <span> element to blue if the <span> is the only child of its parent and the second line would set the <p> element to purple if it is the only <p> tag child of its parent.

The:nth-child(n) pseudo class selector selects the element that is the nth child of its parent and :nth-last-child(n) selects the element that is the nth-from-last child of its parent. For example,

div:nth-child(2) {background-color:yellow;}
div:nth-last-child(2) {color:green;}

would set the background color to yellow if the div is its parent’s second child and the font color to green if the div is its parent’s second-to-last child.

The: root pseudo class selector selects the element that is the root of the document and: empty selects an element that has no children. For example,

:root {background-color: brown;}
div:empty{background-color:green;}

would set the background color brown for the root element and set the background color green if it has no children.

Example:

Here is an example to illustrate the uses of only-child: only-of-type: nth-child(n),:nth-last-child(n), : root and: empty pseudo-classes in an HTML document.

CSS code: span:only-child {color:blue;}
p:only-of-type {color:purple;}
div:nth-child(2) {background-color:yellow;}
div:nth-last-child(4) {color:green;}
:root {background-color: pink;}
p:empty{background-color: green; width:100px;height:20px;}

HTML code: <b><span>This line is blue</span></b>
<div>It is first "div" tag </div>
<div>It is second "div" tag </div>
<div>It is third "div" tag </div>
<p>It is first "p" tag </p>
<p></p>

Demo:

Language Pseudo Class

We have already discussed in CSS attribute selectors, which can be used to address values set for the common lang attribute. The:lang() pseudo-class also performs the same thing as the |= selector.
Instead of writing p[lang |="en"] {color:red} we can write using :lang() pseudo-class as the following

p:lang(en) {color:red;}

which makes all paragraphs written in English to read.

Example:

CSS code: p:lang(en) {color:red;}

HTML code: <p lang="en">This is English and red</p>
<p lang="en-uk">This is British English and red</p>
<p>This is not red</p>
<p lang="fr">Ceci est le français et pas rouge</p>

Demo:

Negation Pseudo Class

There is one of the most interesting pseudo-classes introduced by CSS3 is : not() selector. Which takes simple parameters such as element type selectors, wildcard selectors, attribute selectors, id selectors, class selectors and pseudo-class selectors. For example the rule,

#menubar > a:not (:visited) {color:pink;}

would select all links with an element having id “menubar” that are not being visited set them to pink color.

Example:

CSS code: #menubar > a:not (:visited) {color:pink;}

HTML code: <div id="menubar"><a href="www.siteforinfotech.com">Infotech Site</a></div>

Demo:

Read Next: How To Set Background Image or Color Using CSS

Please follow and like us: