Pseudo-classes allow adding CSS rules to certain parts of the same selector.
For example, when you define a style for a HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to define a different style for the first (or last) element of those tags or for the first content of a group of elements with the same class, you can accomplish this by using pseudo-classes.
Also, they can change the graphic style of items when the mouse is acting on them.


- Syntax:
selector:pseudo-class { property: value; }
Or, used with class:
selector.class:pseudo-class { property: value; }

List with Pseudo-classes


To understand CSS pseudo-classes, how they work and what is their effect, study the following examples.


Pseudo-classes with type selector

Type selectors refer to HTML tags which they define (eg.: p for <p>, li for <li>, div for <div>, etc.).
In the following example is used first-child with paragraphs.

<style>
p:first-child {
color:blue;
}
</style>

<h4>Example first-child</h4>
<blockquote>Apply css style to first P tag.</blockquote>

<div>
<p>A text within the first paragraph</p>
<p>Content in the second paragraph</p>
<p>Text content in the third paragraph</p>
</div>
• Other example, with the hover value applied to <li> tags.
<style>
li:hover {
background-color:#88fe88;
}
</style>

<h4>Example hover</h4>
<p>When you place the mouse over each LI, it will have a green background.</p>

<ul>
 <li>Free courses and tutorials</li>
 <li>Web site: https://coursesweb.net</li>
 <li>Web site: marplo.net</li>
</ul>

Pseudo-classes with class

Pseudo-classes are not the same with classes. The classes refer to the value of a class attribute, in stylesheets are added after a (.) character.
- In the next example are used lang and last-child applied to a class '.test':
<style>
.test:last-child {
background-color:#88fe88;
}
.test:lang(en) {
color:blue;
}
</style>

<h4>Example lang and last-child</h4>
<p>The CSS style defined for <b>test: last-child</b> will be applied to the last LI that has class 'test'.<br>
The CSS rule added to <b>.test:lang(en)</b> is applied only to the element that has both: <em>class='test'</em> and <em>lang='en'</em> attributes.</p>

<ul>
 <li class='test'>HTML: https://coursesweb.net/html</li>
 <li class='test' lang='en'>CSS: https://coursesweb.net/css</li>
 <li class='test'>JavaScript: https://coursesweb.net/javascript</li>
</ul>
• Here is other example, where are combined a class (test), a type selector <em> tag and 'first-child'.
<style>
/* Applies to the first EM tag of every element with class='test' */
.test em:first-child {
font-weight: bold;
color: blue;
}
</style>

<p>A CSS style will be applied to first EM tag of every 'test' class.</p>

<p class='test'>Paragraph with three EM tags: <em>blue text</em>, a <em>second EM tag</em>, and another <em>em text</em>.</p>
<p class='test'>Another paragraph: <em>a bold-italic blue string</em>, and a second <em>em sub-string</em>.</p>

Pseudo-classes with ID and form elements

In the fallowing example is used the hover pseudo-class applied to an ID, and the focus pseudo-class to a class (test).
<style>
#idb:hover {
background-color:#12da34;
}
.test:focus {
background-color:#dadafe;
}
</style>

<h4>Example hover and focus</h4>
<p>When the mouse is over the button it changes its background color.<br>
When you click on the text areas of the form it changes their background color.</p>

<form action='' method='post'>
 <input type='text' class='test' /><br />
 <textarea cols='20' rows='5' class='test'></textarea><br />
 <input type='button' value='Button' id='idb' />
</form>

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

Last accessed pages

  1. Node.js Move and Copy file (14333)
  2. Add text between two DIV tags (1492)
  3. Read Excel file data in PHP - PhpExcelReader (72671)
  4. Contact page - CoursesWeb (29636)
  5. Tabs effect with CSS (30297)

Popular pages this month

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