Most Useful & Advance CSS3 Pseudo Classes

Pseudo Classes help to select and apply the styles for a particular or group of HTML elements.

Pseudo Classes are used to apply the style while mouse hovering, visited, and unvisited links and focusing on the element.

We can use the Pseudo class with CSS Classes.

Pseudo Classes denoted by ( : ) symbol.
 

Syntax :

selector:pseudo-class {
  property: value;
}{codeBox}

 

Read :

 

     CSS Selectors That Every Developer Must Know

     CSS Pseudo Elements

 

There are many types of Pseudo Classes.

1): empty

 

    : empty Pseudo-class helps to select and apply the styles to the element without child node and text nodes.

Example :

    below example select and apply the style to the element without child or children node.

HTML

<p></p>

 

<p>Attractive Aurora One </p>

<p>Attractive Aurora Two </p>{codeBox}

 

CSS

 

p:empty {
  background: red;
}{codeBox}

 

Output

                  

Attractive Aurora One

Attractive Aurora Two{codeBox}

2) :disabled

 

    : disabled Pseudo-class helps to select and apply the styles to the disabled element like input, buttons, and form elements.

 

Example :

    below example select and apply the background color to the disabled input.

HTML

<input value="attrativeaurora">

 

<input disabled value="attrativeaurora">{codeBox}

 

CSS

 

input:disabled {
  background: yellow;
}{codeBox}

Output 

_________________

attrativeaurora|

_________________

attrativeaurora|{codeBox}                  

 

3):enabled

 

    : enabled Pseudo-class helps to select and apply the styles to the enabled element like input, buttons, and form elements.

Example :

   below example select and apply the background color to the enabled input.

HTML

<input disabled value="attrativeaurora">

 

<input value="attrativeaurora">{codeBox}

 

CSS

 

input:enabled {
  background: red;
}{codeBox}

Output 

_________________

attrativeaurora|

_________________

attrativeaurora|{codeBox}                  

4):first-of-type

 

    :first-of-type Pseudo-classes help to select and apply styles to the first child of the same element of a parent.

 

Example : 

     

    below example select and apply the style to the first paragraph.

 

HTML

<div>

    <p>Attractive Aurora One </p>

    <p>Attractive Aurora Two</p>

</div>{codeBox}

CSS

p:first-of-type {
  background: green;
}{codeBox}

Output

Attractive Aurora One

Attractive Aurora Two{codeBox}

 

5)Anchor Pseudo-classes

 

    Anchor Pseudo-classes helps to apply the style based on the link state.

 

    For example, hover the link, visited link, active link, and more.

Example : 

 

HTML

<a href="https://www.attractiveaurora.com" target="_blank"> Attractive Aurora</a>{codeBox}

 

CSS

/* unvisited link */
a:link {
  color: red;
}

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

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: orange;
}{codeBox} 

Output

Attractive Aurora /* unvisited link */

Attractive Aurora /* visited link */

Attractive Aurora /* mouse over link */

Attractive Aurora /* selected link */{codeBox}

 

6):first-child

 

    :first-child Pseudo-classes help to select and apply styles to the first child of any element.

 

Example : 

     

    below example select and apply the style to the first paragraph of every div element.

 

HTML

<div>

    <p>Attractive Aurora One </p>

    <p>Attractive Aurora Two</p>

</div>{codeBox}

CSS

div p:first-child {
  color: blue;
}{codeBox}

Output

Attractive Aurora One 

Attractive Aurora Two{codeBox}

 

 

I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this : 

 

         CSS Pseudo Elements

         CSS Selectors That Every Developer Must Know

 

         Javascript Web API's That Every Developer Should Know

         HTML API's That Every Developer Should Know