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.


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>
ul.cls li:nth-child(odd) {
background: #abedcd;
font-weight: 800;
}
</style>

<h4>Example nth-child(odd)</h4>
<ul class='cls'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>
2. Matches and sets CSS style to the first two <li> items in <ul> with class='cls'.
<style>
ul.cls li:nth-child(-n + 2) {
background: #abedcd;
font-weight: 800;
}
</style>

<h4>Example nth-child(-n + 2)</h4>

<ul class='cls'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>
3. Defines CSS properties for the third <li> item in UL HTML element.
<style>
ul li:nth-child(3) {
 background: #abedcd;
 font-weight: 800;
}
</style>

<h4>Example nth-child(3)</h4>

<ul>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>

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>
ul.cls li:nth-last-child(-n + 2) {
 background: #bddef8;
 color: #da0000;
}
</style>

<h4>Example nth-last-child(-n + 2)</h4>

<ul class='cls'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>
2. Defines CSS properties for the last <li> item in UL HTML element (equivalent to ':last-child').
<style>
ul li:nth-last-child(1) {
 background: #abedcd;
 font-weight:800;
}
</style>

<h4>Example nth-last-child(1)</h4>

<ul>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>

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>
div.cls span:nth-of-type(odd) {
 background: #01fb00;
 color: #0001ef;
}
</style>

<h4>Example nth-of-type(odd)</h4>

<div class='cls'>
 <span>CSS pseudo-classes</span>
 <div>Web Development Courses</div>
 <span>CSS course</span><br/>
 <span>HTML - CSS3 tutorials</span>
</div>
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>
#theid p:nth-of-type(2n + 0) {
 background: #01fb00;
 color: #0001ef;
}
</style>

<h4>Example nth-of-type(2n + 0)</h4>

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

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

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

<h4>Example nth-last-of-type(-n + 2)</h4>

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

last-child

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

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

<h4>Example last-child</h4>

<ul class='cls'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
 <li>https://gamv.eu/</li>
 <li>www.google.com/</li>
</ul>

first-of-type

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

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

<h4>Example first-of-type</h4>

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

last-of-type

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

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

<h4>Example last-of-type</h4>

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

only-child

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

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

<h4>Example only-child</h4>

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

only-of-type

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

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

<h4>Example only-of-type</h4>

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

root

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

- Sets a background color for Root (<html> item, so, for entire page).
<style>
:root {
 background: #99ef99;
}
</style>

<h4>Example root pseudo-class</h4>
<p>This is an iframe.</p>

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.

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

<h4>Example empty pseudo-class</h4>

<ul>
 <li>https://CoursesWeb.net/</li>
 <li></li>
 <li>https://gamv.eu/</li>
 <li></li>
</ul>

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 (https://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>).

- 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 HTML tag with id='target_id' will be displayed with a background color and font thicker.
<style>
:target {
 background: #01fb00;
 font-weight: 800;
}
</style>

<h4>Example target pseudo-class</h4>

<ul>
 <li id='other_id'>https://marplo.net/</li>
 <li id='target_id'>https://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).

- 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>
#formid input:enabled {
 background: #01fb00;
 font-weight: 800;
}
</style>

<h4>Example enabled pseudo-class</h4>

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

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

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

<h4>Example disabled pseudo-class</h4>

<form action='#' method='post' id='formid'>
 <input type='text' value='enabled'/>
 <input type='text' disabled='disabled' value='disabled' />
 <input type='button' value='Button' />
</form>

checked

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

- 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.
<style>
input.cls {
 display: none;
}
input.cls:checked {
 display: block;
}
#lchb {
 cursor: pointer;
}
</style>

<h4>Example CSS checked</h4>
<blockquote>Click on the label.</blockquote>

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

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

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

<h4>Example CSS not()</h4>

<ul>
 <li>https://CoursesWeb.net/</li>
 <li>This UL has no class</li>
</ul><br>

<ul class='clas'>
 <li>https://gamv.eu/</li>
 <li>This UL has class='clas'</li>
</ul>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Pseudo-classes added in CSS3

Last accessed pages

  1. Wake Up! (4028)
  2. Styling link buttons using a Single Image and CSS (1891)
  3. Define Custom List-item Markers, Bullets for UL, OL Lists (4172)
  4. Contact page - CoursesWeb (29641)
  5. Tabs effect with CSS (30302)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1083)
  2. Contact page - CoursesWeb (1055)
  3. Tabs effect with CSS (1051)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (453)
  5. PHP getElementById and getElementsByTagName (332)