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
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Pseudo-classes added in CSS3

Last accessed pages

  1. PHP PDO - Select query, fetch (21562)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (57371)
  3. Creating objects in ActionScript (7754)
  4. Create simple Website with PHP (22244)
  5. Diamond shape with CSS (1879)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1828)
  2. Contact page - CoursesWeb (1757)
  3. Tabs effect with CSS (1750)
  4. Insert, Select and Update NULL value in MySQL (1031)
  5. PHP getElementById and getElementsByTagName (708)