Web Designing Tutorials

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

Pinterest LinkedIn Tumblr

We have already discussed that, we can style multiple sections of an HTML document using CSS selectors pseudo classes and have discussed on some pseudo-class selectors like link related pseudo classes, activity related pseudo classes and interface state pseudo classes. In this post we are going to discuss about rest of the other pseudo class selectors which are document tree pseudo classes, language pseudo class and negation pseudo class.

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 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 is 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 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:

See the Pen yNrqQX by Shuseel Baral (@shuseel) on CodePen.

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:

See the Pen rVbrPJ by Shuseel Baral (@shuseel) on CodePen.

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 its the only child of its parent with its type. For example,

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

First line would set the color of <span> element to blue if the <span> is the only child of its parent and 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 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 sets the background-color brown for the root element and sets 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 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:

See the Pen XbQBwq by Shuseel Baral (@shuseel) on CodePen.

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 red.

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:

See the Pen EjJeVd by Shuseel Baral (@shuseel) on CodePen.

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, the wildcard selector, attribute selector, 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:

See the Pen vOMzLY by Shuseel Baral (@shuseel) on CodePen.

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

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.