Thursday, 22 July 2021

CSS Selector - CSS Pseudo-classes

 CSS Pseudo-classes


What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.


For example, it can be used to:


Style an element when a user mouses over it

Style visited and unvisited links differently

Style an element when it gets focus


Syntax


selector:pseudo-class {

  property: value;

}



Anchor Pseudo-classes



/* unvisited link */

a:link {

  color: #FF0000;

}


/* visited link */

a:visited {

  color: #00FF00;

}


/* mouse over link */

a:hover {

  color: #FF00FF;

}


/* selected link */

a:active {

  color: #0000FF;

}



Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.



CSS - The :first-child Pseudo-class


The :first-child pseudo-class matches a specified element that is the first child of another element.


p:first-child {

  color: blue;

}


<p>UP</p>

<p>This is some text.</p>


the selector matches any <p> element that is the first child of any element:



Match the first <i> element in all <p> elements


p i:first-child {

  color: blue;

}


<p>I am a <i>UP</i> person. I am a <i>strong</i> person.</p>

<p>I am a <i>Delhi</i> person. I am a <i>strong</i> person.</p>



Match all <i> elements in all first child <p> elements


p:first-child i {

  color: blue;

}


<p>I am a <i>UP</i> person. I am a <i>Delhi</i> person.</p> color

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>


CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.




No comments:

Post a Comment