What are CSS Pseudo classes & Pseudo elements

In newspaper articles, you can see the first letter is bigger and bold, In books some lines have been underlined or some text is highlighted with different colors. Websites have also such type of formatting on their web pages. This particular formatting can apply to specific HTML elements which you want to wish. 

But the question is how is it possible? This is possible with Pseudo classes and Pseudo elements. 

This post is about how Pseudo classes and elements are used to give special effects to some specific HTML elements to give them attractive look. This post describes some commonly used pseudo-classes and pseudo-elements and the difference between them. 

First, we discussed Pseudo-classes. 

What are Pseudo-classes? 

The CSS Pseudo-classes are keywords having a colon (:) sign before the word. Pseudo-classes gives special kind of CSS styles to specifically selected elements.

 For example 

:hover pseudo-class to change the color, size, etc. of HTML elements when the user mouse over on it. Like a button, when the user mouse over it, its color change. 

Syntax of Pseudo-classes

Selector:Pseudo-class{property:value;}

Pseudo-classes are also used with CSS classes. 

Selector. Class:Pseudo-class{property:value;}

The following are the most commonly used Pseudo-classes:

:link  pseudo-class 

  :link pseudo-class adds a special style to an unvisited link. 

/*Unvisited link*/
a:link
{
color:orange;
}

Output:-

:link pseudo-class 

:visited pseudo-class 

  :visited pseudo-class adds a special style to a visited link. 

/*Visited link*/
a:visited
{
color:blue;
}

Output:-

:visited pseudo-class 

:hover pseudo-class 

When you mouse hover over an HTML element this class changes the CSS style of that HTML element. 

/*Change link color when mouse over*/
a:hover
{
color:red;
}

Output:-

:active pseudo-class 

This class gives special effects to the active element. 

The above four classes are commonly used for anchor tags (<a></a>) to change the color of links. 

/*active link*/
a:active
{
color:green;
}

Output:-

Note:-

While defining the above four Pseudo classes, the following point should be remembered:

• a:hover must come after a:link and a:visited

• a:active must come after a:hover to be effective. 

:first-child pseudo-class 

The first-child Pseudo- class matches an element that is the first child of a parent element. If a match is found it will apply specified CSS styles to that first-child element. 

.demo
{
background-color:mediumseagreen;
margin:25px;
padding:10px;
}
.demo p:first-child
{
font-weight:bold;
font-size:24pt;
color:red;
}

Output:-

:first-child pseudo-class 

:last-child pseudo-class 

The :last-chlid Pseudo-class matches the element that is last-child of a parent element. CSS styles apply to only the last child of a parent element. 

.demo p:last-child
{
color:magenta;
font-size:11pt;
font-weight:bold;
text-decoration:underline;
}

Output:-

:last-child pseudo-class 

:nth-child (n) pseudo-class 

The :nth-child() Pseudo-class matches the element whose index number is specified in the bracket. In the bracket, a numeric value should be specified. You can also add keywords in the bracket.

For example, if you specify the “even“ or “odd” keyword, It will match the “odd” or “even “ number of the element’s index number and apply CSS effects. 

Note: n can be any number, keyword, or formula. 

.demo p:nth-child(even)
{
background-color:violet;
font-style:italic;
}
.demo p:nth-child(3)
{
color:blue;
font-size:18pt;
}

Output:-

:nth-child pseudo-class 

:focus pseudo-class 

The :focus Pseudo-class focuses on the element that is selected or tabbed by a keyboard. It applies CSS effects when an element is targeted. 

a:focus
{
color:orange;

font-style:italic;
}

Output:-

:lang pseudo-class (languagecode) 

:lang() pseudo-class select HTML elements that have the “lang” attribute. You can specify the “lang” attribute value in two letters(language code). 

For example, lang= ”en”.(en for the English language). The :lang pseudo-class selects those html elements with language code “en”.

<p lang="it">This is example of :lang pseudo class.</p>
<p lang="fr"><q>This is simple paragraph having quotes in french language.</q></p>

p:lang(it)
{
background-color:lime;
}
p:lang(fr) >q
{
quotes: "<<" ">>";
}

Output:-

:lang pseudo-class 

:checked pseudo-class 

:checked pseudo-class is used to alter CSS styles of input controls such as checkbox, radio button, and select (drop-down list) when they are checked or selected.

 Example 1

 when the radio button and checkbox are checked CSS style displayed is specified by :checked pseudo-class.

#check2:checked
{
box-shadow:3px 3px 5px #0000ff;
outline:2px solid #000000;
}
input[type="radio"]:checked
{
outline:3px dashed #00ff00;
background-color:#0000ff;
}

<input type="checkbox" name="chk" id="check1">Apple
<input type="checkbox" name="chk" id="check2">Banana <br>
<input type="radio" name="r1" id="radio1">Yes
<input type="radio" name="r1" id="radio2">No

Output:-

: checked pseudo-class (checkbox and radio button)

Example 2 

selected option is displayed in the center.

select
{
width:100px;
height:50px;
}
option:checked
{
text-align:center;
display:none;
}

<label>select your favorite cars:</label>
<select> 
<option value="bmw">BMW</option>
<option value="nexa">Nexa</option>
<option value="SUV">SUV</option>
<option value="volvo">Volvo</option>
</select>

Output:-

:empty Pseudo-class 

:empty Pseudo-class selects all elements that don't have children means elements with no content. It includes empty elements, comments, and whitespace.

Example 1 empty elements

p:empty
{
border:2px solid #ff0000;
height:10px;
}
div:empty
{
background-color:#ff0000;
height:20px;
}

<p>hii</p>
<p></p>
<div>
<p>text</p>
</div>
<div></div>

Output:-

:empty Pseudo-class (empty element example)

Example 2 comment text

div:empty
{
background-color:#ff0000;
height:20px;
}

<div>
<p>text</p>
</div>
<div><!-- This is comment and not display on screen--></div>
</body>

Output:-

:empty Pseudo-class (comments in elements example)

:not(selector) pseudo class 

The :not(selector) pseudo class selects all html elements that are not match with specified selector in bracket.

Example 1

Red color applied on h1 and h2 elements.

:not(p)
{
color:#ff0000;
}
p
{
color:#00ffcc;
}

<h1>This is major heading.</h1>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<h2>This is heading.</h2>

Output:-

:not(selector) pseudo class example 

Example 2

<span> element with class .bita have 16pt smaller than other <span> and different color.

:not(.bita)
{
font-size:22pt;
color:#023455;
}
.bita
{
font-size:16pt;
color:#ffcc00;
}

<span>Alpha</span>
<span class="bita">Bita</span>
<span>Gema</span>

Output:-

:not(selector) pseudo class example 

What are Pseudo-elements? 

Pseudo-elements apply CSS styles to a specific part of an element.

The double colon (::) sign was added before the Pseudo element in CSS3 to distinguish between pseudo-classes and pseudo-element. 

For example, if you want the first letter of any paragraph to be bigger than the rest of the letters in a paragraph. Pseudo element ::first-letter is used to apply such type of CSS styles to the first letter of a paragraph or any article. 

Syntax of pseudo element

Selector ::Pseudo-element{

Property : value;

}

The most commonly used Pseudo elements are:

::first-letter pseudo-element 

 The ::first-letter pseudo-element applies special CSS styles to the first-letter of a paragraph. 

::first-line pseudo-element 

The ::first-line pseudo-element applies CSS styles to the first-line of a paragraph. 

::before pseudo-element 

The ::before pseudo-element add some content before the targeted content of an element. 

::after pseudo-element 

The ::before pseudo-element add some content after the targeted content of an element. 

Note:-  content should be “text”, “image “ or it should be blank “ “.

::marker pseudo-element 

The ::marker pseudo-element applies CSS styles to bullets of list items. 

::selection pseudo-element 

The ::selection pseudo-element applies CSS styles to some part of an element selected by a user. You can apply the following properties to ::selection :- color, background-color, cursor, and outline. Others are not working. 

The following example describes the pseudo-elements. 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<!Doctype html> <html> <head> <title>Pseudo elements</title> <style> .frstltr,.frstline,.bfraftr,.mark{ margin:20px; padding:10px; background-color:#ccc; } p.fl::first-letter{ font-size:24pt; color:#0000ff; } p.fln::first-line{ font-weight:bold; color:#f9c; } .bfaf::before{ content:"@before@"; color:slateblue; } .bfaf::after{ content:"@after@"; color:slateblue; } ::marker{ color:#00f;} ::selection{ color:green; background-color:red; } </style> </head> <body> <div class="frstltr"> <h2>FIRST LETTER</h2> <p class="fl">This is the "::first-letter" pseudo -element.</p> </div> <div class="frstline"> <h2>FIRST LINE</h2> <p class="fln">This is the "::first-line" pseudo -element.<br>This pseudo element affect only first line of element.</p> </div> <div class="bfraftr"> <h2>BEFORE AND AFTER</h2> <p class="bfaf">This is the "::before" pseudo -element.</p> </div> <div class="mark"> <h2>Marker</h2> <p>List out the computer memory</p> <ul> <li>RAM</li> <ol> <li>SRAM</li> <li>DRAM</li> </ol> <li>ROM</li> <ol> <li>MROM</li> <li>PROM</li> <li>EEPROM</li> </ol> </ul> </div> </body> </html>

Output:-

Pseudo-elements 

Difference between  pseudo-classes and pseudo-elements

>> Pseudo classes present a special state of Html elements, which simple CSS selectors can’t do. 

>> Pseudo elements style specific parts of an element. 

Conclusion:-

Pseudo-classes and pseudo-elements are easy to use and not complicated at all. Using pseudo-classes and elements you can give fantastic look to a web page. Pseudo-class and pseudo-elements can be used together.