Pseudo-classes allow adding CSS rules to certain HTML items in a group of matched selectors.
In this tutorial there are presented the pseudo-classes added in CSS3. These CSS3 pseudo-classes are supported by modern Browsers (IE 9+).

- CSS3 pseudo-classes list:
  - Syntax:
selector:pseudo-class { property: value; }
Or, used with class:
selector .class:pseudo-class { property: value; }
To understand CSS3 pseudo-classes, how they work and what is their effect, study the following examples.

nth-child

• The nth-child() pseudo-class matches every element that is the "nth" child (regardless of type) of its parent. "n" can be a keyword (odd, even), an integer number, or a number expression of the form (an+b).

1. Matches and sets CSS style to odd-numbered <li> items in <ul> with class="cls".
<style type="text/css">
ul.cls li:nth-child(odd) {
  background: #abedcd;
  font-weight: 800;
}
</style>

<ul class="cls">
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Results:
2. Matches and sets CSS style to the first two <li> items in <ul> with class="cls".
<style type="text/css">
ul.cls li:nth-child(-n + 2) {
  background: #abedcd;
  font-weight: 800;
}
</style>

<ul class="cls">
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Results:
3. Defines CSS properties for the third <li> item in HTML element with id="theid".
<style type="text/css">
#theid li:nth-child(3) {
  background: #abedcd;
  font-weight: 800;
}
</style>

<ul id="theid">
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Results:

nth-last-child

• The nth-last-child() pseudo-class matches every element that is the "nth" child (regardless of type) of its parent, counting from the last child. "n" can be a keyword (odd, even), an integer number, or a number expression of the form (an+b).

1. Matches and sets CSS style to the last two <li> items in <ul> with class="cls".
<style type="text/css">
ul.cls li:nth-last-child(-n + 2) {
  background: #bddef8;
  color: #da8899;
}
</style>

<ul class="cls">
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Demo:
2. Defines CSS properties for the last <li> item in HTML element with id="theid" (equivalent to ":last-child").
<style type="text/css">
#theid li:nth-last-child(1) {
  background: #abedcd;
  font-weight:800;
}
</style>

<ul ie="theid">
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Results:

nth-of-type

• The nth-of-type() pseudo-class matches every element that is the "nth" child (of a particular type) of its parent, ignoring any children that aren’t of that type. "n" can be a keyword (odd, even), an integer number higher than 0, or a number expression of the form (an+b).

1. Matches and sets CSS style to odd-numbered <span> elements in <div> with class="cls".
<style type="text/css">
div.cls span:nth-of-type(odd) {
  background: #01fb00;
  color: #0001ef;
}
</style>

<div class="cls">
 <span>CSS pseudo-classes</span>
 <div>Web Development Courses</div>
 <span>CSS course</span><br/>
 <span>HTML - CSS3 tutorials</span>
</div>
- Demo:
CSS pseudo-classes
Web Development Courses
CSS course
HTML - CSS3 tutorials
2. Specify a background and text color for all <p> elements whose index is a multiple of 2, in HTML item with id="theid".
<style type="text/css">
#theid p:nth-of-type(2n + 0) {
  background: #01fb00;
  color: #0001ef;
}
</style>

<div id="theid">
 <p>CSS pseudo-classes</p>
 <div>Web Development Courses</div>
 <p>CSS course</p>
 <p>HTML - CSS3 tutorials</p>
</div>
- Results:

CSS pseudo-classes

Web Development Courses

CSS course

HTML - CSS3 tutorials

nth-last-of-type

• The nth-last-of-type() pseudo-class matches every element that is the "nth" child (of a particular type) of its parent, ignoring any children that aren’t of that type; and counting from the last child. "n" can be a keyword (odd, even), an integer number higher than 0, or a number expression of the form (an+b).

1. Specify a background color for last two <p> elements in HTML item with id="theid".
<style type="text/css">
#theid p:nth-last-of-type(-n + 2) {
  background: #01fb00;
}
</style>

<div id="theid">
 <p>CSS pseudo-classes</p>
 <div>Web Development Courses</div>
 <p>CSS course</p>
 <p>HTML - CSS3 tutorials</p>
</div>
- Results:

CSS pseudo-classes

Web Development Courses

CSS course

HTML - CSS3 tutorials

last-child

• The last-child pseudo-class matches an element that is the last child of its parent.

1. Specify a background color and border for the last <li> element in every <ul> item.
<style type="text/css">
ul li:last-child {
  background: #01fb00;
  border: 2px dashed blue;
}
</style>

<ul>
 <li>http://CoursesWeb.net/</li>
 <li>http://www.MarPlo.net/</li>
 <li>www.php.net/</li>
 <li>www.google.com/</li>
</ul>
- Demo:

first-of-type

• The first-of-type pseudo-class matches the first child element of the specified type.

1. Specify a background color and border for the first <p> element that’s a child of a Div element:.
<style type="text/css">
div>p:first-of-type {
  background: #01fb00;
  border: 2px dashed blue;
}
</style>

<div>
 <p>CSS3 pseudo-classes</p>
 <div>Web Development Courses</div>
 <p>Build and design web pages</p>
 <p>HTML - CSS tutorials</p>
</div>
- Demo:

CSS3 pseudo-classes

Web Development Courses

Build and design web pages

HTML - CSS tutorials

last-of-type

• The last-of-type pseudo-class matches the last child element of the specified type.

1. Specify a background color and border for the last <p> element that’s child <div> item.
<style type="text/css">
div>p:last-of-type {
  background: #01fb00;
  border: 2px dashed blue;
}
</style>

<div>
 <p>CSS3 pseudo-classes</p>
 <div>Web Development Courses</div>
 <p>Build and design web pages</p>
 <p>HTML - CSS tutorials</p>
</div>
- Demo:

CSS3 pseudo-classes

Web Development Courses

Build and design web pages

HTML - CSS tutorials

only-child

• The only-child pseudo-class matches an element that’s the only child element of its type.

1. Defines a background color for <p> element that is the only child of its parent.
<style type="text/css">
p:only-child {
  background: #01fb00;
}
</style>

<div><p>This is a Div with only a child item, a paragraph.</p></div>
<div><span>This is a Div with span tag.</span><p>And a paragraph.</p></div>
- Demo:

This is a Div with only a child item, a paragraph.

This is a Div with span tag.

And a paragraph.

only-of-type

• The only-of-type pseudo-class matches an element that’s the only child element of its type.

1. Defines a background color for <p> element that is the only child of its type in its parent.
<style type="text/css">
p:only-of-type {
  background: #01fb00;
}
</style>

<div><p>This is a Div with two child items, two paragraphs.</p><p>Second P child.</p></div>
<div><p>This is another Div with two child items, a paragraph.</p><span>And a span tag.</span></div>
- Demo:

This is a Div with two child items, two paragraphs.

Second P child.

This is another Div with two child items, a paragraph.

And a span tag.

root

• The root pseudo-class matches the document’s root element. In HTML documents, this selector matches the html element.

1. Sets a background color for Root (<html> item, so, for entire page).
<style type="text/css">
:root {
  background: #01fb00;
}
</style>

empty

• The empty pseudo-class matches elements that have no children. A text node is considered empty if it has a data length of zero; so, for example, a text node with a single space isn’t empty.

1. Sets a width, height, and background for empty <li> elements in every <ul> item.
<style type="text/css">
ul li:empty {
  width: 2em;
  height: 1em;
  background: #01fb00;
}
</style>

<ul>
 <li>http://CoursesWeb.net/</li>
 <li></li>
 <li>www.php.net/</li>
 <li></li>
</ul>
- Demo:

target

• The target pseudo-class matches an element that’s the target of a fragment identifier in the page`s URI. The fragment identifier in a URI comprises a # character followed by an identifier name (http://coursesweb.net/css/css3-pseudo-classes#nthlc) that matches the value of an ID attribute of an element within the web page (<li id="nthlc"></li>).

1. Specify a background color and font-weight for the element that has the ID the same with the targei in URL address (after # character). For example, if the page address in the browser is: "page.html#target_id", the LI tag with id="target_id" will be displayed with a background color and font thicker.
<style type="text/css">
:target {
  background: #01fb00;
  font-weight: 800;
}
</style>

<ul>
 <li id="other_id">http://www.MarPlo.net/</li>
 <li id="target_id">http://CoursesWeb.net/</li>
 <li id="another_id">www.php.net/</li>
</ul>

enabled

• The enabled pseudo-class matches enabled elements. An element is enabled when it can be selected, clicked on, or accept text input (mostly used on form elements).

1. In this example, sets some CSS styles to all the enabled input items in element with id="formid" (these styles are not applied to input with "disabled" attribute).
<style type="text/css">
#formid input:enabled {
  background: #01fb00;
  font-weight: 800;
}
</style>

<form action="#" method="post" id="formid">
 <input type="password" value="abcxyz"/>
 <input type="text" disabled="disabled" value="disabled" />
 <input type="button" value="Button" />
</form>
- Demo:

disabled

• The disabled pseudo-class matches disabled elements. An element is disabled when it cannot be selected, clicked on, or accept text input (mostly used on form elements).

1. In this example, defines some CSS styles to all the disabled input items in element with id="formid" (input with "disabled" attribute).
<style type="text/css">
#formid input:disabled {
  background: #01fb00;
  font-weight: 800;
}
</style>

<form action="#" method="post" id="formid">
 <input type="text" value="enabled"/>
 <input type="text" disabled="disabled" value="disabled" />
 <input type="button" value="Button" />
</form>
- Demo:

checked

• The checked pseudo-class matches elements like checkboxes, radio buttons or option in <select> that are checked.

1. In the following example we have a hidden checkbox button, and a label item associated to it (with "for" attribute). We set in css to apply "display: block" to checked input with class="cls". So, when you click on the label item, the checkbox is checked, and is made visible. When the checkbox is uncheck, it is again hidden.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example checked pseudo-class</title>
<style type="text/css">
input.cls {
  display: none;
}
input.cls:checked {
  display: block;
}
#lchb {
  cursor: pointer;
}
</style>
</head>
<body>

<input type="checkbox" id="chb" class="cls"/>
<label id="lchb" for="chb">Show hidden checkbox</label>

</body>
</html>
- Demo (click on the Text, then click on the checkbox to uncheck it):

not(s)

• The not(s) pseudo-class, also known as the negation pseudo-class; matches elements that aren’t matched by the specified selector (s).

1. Specify a background color and font-style to all the UL items without class="clas".
<style type="text/css">
ul:not(.clas) {
  background: #abedcd;
  font-style: italic;
}
</style>

<ul>
 <li>http://CoursesWeb.net/</li>
 <li>This UL has no class</li>
</ul><br/>
<ul class="clas">
 <li>www.php.net/</li>
 <li>This UL has class="clas"</li>
</ul>
- Demo:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
CSS3 Pseudo-classes

Last accessed pages

  1. Makeup Game (37)
  2. Emma Christmas Tree (42)
  3. Sport Games (2108)
  4. Adventure Games (2126)
  5. Doodle God 2 (284)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47990)
  2. Read Excel file data in PHP - PhpExcelReader (36111)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35689)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32182)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29461)