Css Course

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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Pseudo-classes added in CSS3

Last accessed pages

  1. JavaScript Course - Free lessons (31368)
  2. Recursive function to create Multi-Level Menu in JavaScript (5882)
  3. CSS cursor property - Custom Cursors (5711)
  4. Working with HTML attributes in PHP (13486)
  5. PHP Unzipper - Extract Zip, Rar Archives (31725)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)
  2. Read Excel file data in PHP - PhpExcelReader (72)
  3. The Four Agreements (65)
  4. PHP Unzipper - Extract Zip, Rar Archives (64)
  5. The Mastery of Love (49)
Chat
Chat or leave a message for the other users
Full screenInchide