CSS – Pseudo Classes


CSS – Pseudo Classes


”;


Previous

Next

Pseudo-classes in CSS are used to select and style elements based on their state or position within the document tree, without the need for adding extra classes or JavaScript.

For Example, pseudo-class can be used to change color of element when mouse is hovered over it or Click a button to change color.







Example iframe for Pseudo-Class property





Hover over me!






Table of Contents



 

What is Pseudo-class?

  • Pseudo-classes often used along with CSS Selectors by inserting a colon (:) after selector. For example a : hover{}, Here selector `a` will selects all the anchor tags in document.

  • A functional pseudo-class contains a pair of parentheses to define the arguments. For example: :lang(en).

  • The element to which a pseudo-class is attached, is termed as an anchor element. For example: button:hover, a:focus, etc. Here button and a elements are called the anchor elements.

  • Pseudo-classes apply style to an element as per the content of the document tree.

  • Pseudo-classes also apply a style to an element in relation to the external factors, such as history of the navigation of the element (:visited), status of the content (:checked), or position of mouse (:hover)


Syntax


selector:pseudo-class {
   property: value;
}


Pseudo-Class Hover

In CSS, pseudo-class :hover is used to specify mouse hovering state of an element. This used to style element while users mouse passes through an element in document.

Syntax


tag:hover {
   property: value;
}


Example

Following example shows how this can be applied. 


<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a{
         background-color: lightgrey;
         padding: 10px;
      }
      a:hover {
         color: red;
      }
      
      div{
         padding: 10px;
         border: solid 3px;
         background-color: aqua;
      }
      div:hover{
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h3>Anchor Tag Hovering</h3>
   <a href="#">Hover over me!</a>
   
   <h3>Div Hovering</h3>
   <div>Hover me</div>
</body>
</html>


Pseudo-Class Active

The pseudo-class :active will apply style to an element when user activates the element by clicking or tapping on it. This is most commonly used with interactive elements like button and anchor tag, but all the HTML elements can use this pseudo-class.

Syntax


tag:active {
   property: value;
}


Example

Here is an example that shows different usage of pseudo-class active.


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      a, p, li {
         color: black;
         background-color: lightgrey;
         padding: 7px;
         border: 3px solid;      
      }

      a:active {
         color: red;
      }
   
      p:active {
         background-color: gold;
      }
      
      li:active {
         background-color: darkred;
      }
    </style>
</head>

<body>
    <h2>Active Pseudo-Class Example</h2>
    <h3>For Button:</h3>
    <a href="#">Click Me</a>
    
    <h3>For paragraph:</h3>
    <p>Click me to see the effect.</p>
    
    <h3>For list:</h3>
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>



Pseudo-Class Focus

The pseudo-class :focus will apply style to an element when user focused an element like input tag by clicking on it. Before typing text in input element users has to click in input area to enable cursor, this is called focusing.

Syntax


tag:focus {
   property: value;
}

Example

This example will show how to use pseudo-class focus in HTML.


<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      input{
         padding:3px;
      }
      input:focus {
         border-color: green;
         background-color: lightgrey;
      }
   </style>
</head>

<body>
    <h2>Pseudo-Class focus Example</h2>
    <h3>Focus on input text</h3>
    <input type="text" 
           placeholder="Type Something!">

</body>
</html>


Pseudo-Class nth Child

The pseudo-class :nth-child(n) will apply style to any specified direct child of an element.

Syntax


tag:nth-child(number/ expression / odd / even) {
   property: value;
}

The pseudo-class nth-child can take number, mathematical expression or values like odd, even as parameter. To know about values associated with nth child visit our tutorial on Pseudo Class nth-child().


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: 2px solid;
         margin: 7px;
         padding: 2px;
      }
      /* Apply Style to 2nd child of div */
      div:nth-child(2){
         background-color:red;
      }
      
      /* Apply Style to all odd children of li */
      li:nth-child(odd) {
         background-color: lightgray;
      }
      
      /* Apply Style to all even children of li */
      li:nth-child(even) {
         background-color: lightblue;
      }
    </style>
</head>

<body>
    <h2>Pseudo-Class nth-child</h2>
    <h3>2nd child of Div</h3>
    <div>
        <div>1st div</div>
        <div>2nd div</div>
        <div>3rd div</div>
        <div>4th div</div>
    </div>
    
    <h3>Selecting odd and even children</h3>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>forth item</li>
        <li>Third item</li>
        <li>fifth item</li>
    </ul>
</body>
</html>


Pseudo-Class First-Child

The pseudo-class first-child used to select first direct child element.

Syntax


tag:first-child {
   property: value;
}


Example

Following example show how to use first-child pseudo-class in HTML.


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: solid;
      }
      /* Selects all first child paragraphs */
      p:first-child {
         color: blue;
      }
    </style>
</head>
<body>   
   <p>
      This paragraph is first child of body 
      element, will be blue.
   </p>
   <p>This paragraph will not be affected.</p>
   <p>Another paragraph that won''t be affected.</p>

   <div>
      <p>
         This paragraph is first child of div 
         element will be blue.
      </p>
      <p>This paragraph will not be affected.</p>
      <p>Another paragraph that won''t be affected.</p>
   </div>
</body>
</html>



Pseudo-Class Last-Child

The pseudo-class last-child used to select last direct child element.

Syntax


tag:last-child {
   property: value;
}


Example

Following example show how to use last-child pseudo-class in HTML.


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         border: solid;
      }
      /* Selects all last child paragraphs */
      p:last-child {
         color: blue;
      }
    </style>
</head>
<body>
   <p>This paragraph will not be affected.</p>
   <p>Another paragraph that won''t be affected.</p>

   <div>
      <p>This paragraph will not be affected.</p>
      <p>Another paragraph that won''t be affected.</p>
      <p>
         This paragraph is last child of div 
         element will be blue.
      </p>
   </div>

   <p>
      This paragraph is last child of body 
      element, will be blue.
   </p>
</body>
</html>


Pseudo-Class Lang

The pseudo-class :lang() will apply style to an element based on value of lang attribute set to the element or it”s parent.


Here is an example of :lang() pseudo-class:


<html>
<head>
<style>
   /* Selects all the tags that set english as language */
   :lang(en) {
      quotes: ''""'';
   }
   /* Selects all the tags that set french as language */
   :lang(fr) {
      quotes: ''« '' '' »'';
   }
</style>
</head>
<body>
   <h2>:lang() selector example</h2>
   <q lang="en">
      This language is set as english, Here 
      css use double(" ") quotes
   </q>

   <br>

   <q lang="fr">
      This language is set as French, Here 
      css use guillemet(« ») quotes
   </q>

</body>
</html>


Pseudo-Class Not

The pseudo-class :not(selector) is used to apply style on all the elements expect elements that included in mentioned selectors. To know what is a selector in CSS check out our tutorial on CSS Selectors.

Syntax


tag:not(selector){
   property: value;
}

The selector can be a class, id, or tag in html.

Example

Following example shows how to use not pseudo-class in CSS


<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS :not() Example</title>
    <style>
      /*Style all paragraph except class special*/
      p:not(.special) {
         color: red;
      }
      
      /*Style all special paragraph except id superSpecial*/
      .special:not(#superSpecial){
         background-color: lightgrey;
      }
    </style>
</head>

<body>
    <p>This is a normal paragraph.</p>
    <p class="special" id="superSpecial">
      This is a super special paragraph.
   </p>
    <p>This is another normal paragraph.</p>
    <p class="special">
      This is special paragraph.
   </p>
</body>
</html>


List of CSS Pseudo Classes

The table given below lists all the CSS pseudo-classes:























































Pseudo-class Description Example
:active Represents an element that has been activated by the user.
:any-link Represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
:autofill Matches an element that has its value autofill by the browser.
:checked Matches any radio, checkbox or option element that is checked or toggled.
:default Selects form elements that are the default in a group of related elements.
:defined Represents any custom element that has been defined.
:disabled Represents a disabled element.
:empty Matches an element that has no children.
:enabled Represents an enabled element, after its has been activated.
:first Represents the first page of a printed document, with the @page at-rule.
:first-child Represents the first element among a group of sibling elements.
:first-of-type Represents the first element of its type among a group of sibling elements.
:fullscreen Matches an element that is currently displayed in fullscreen mode.
:focus Represents an element that has received focus.
:focus-visible Applies while an element matches the :focus pseudo-class or receives focus.
:focus-within Matches an element if the element or any of its descendants are focused.
:has() This represents an element if any of the relative selectors.
:host This selects the shadow host of the shadow DOM containing the CSS it is used inside.
:host() This function selects the shadow host of the shadow DOM containing the CSS it is used inside.
:host-context() This function allows you to style a custom element based on the classes or attributes of its ancestor elements.
:hover Matches when the user interacts with an element with a pointing device, like a mouse, but does not necessarily activate it.
:indeterminate Represents any form element whose state is indeterminate or unknown.
:in-range Represents an element whose current value is within the range limits.
:invalid Represents any element whose contents fail to validate.
:is() Takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
:lang() Matches an element based on the language they are defined to be in.
:last-child Represents the last element among a group of sibling elements.
:last-of-type Represents the last element of its type among a group of sibling elements.
:left Represents all left-hand pages of a printed document, used with @page at-rule.
:link Represents an element that has not yet been visited.
:modal Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.
:not() Represents an element that do not match a list of selectors.
:nth-child() Selects child elements according to their position among all the sibling elements within a parent element.
:nth-last-child() Matches elements based on their position among siblings, counting from the last (end)
:nth-last-of-type() Matches elements based on their position among siblings of the same type, counting from the last (end).
:nth-of-type() Matches elements based on their position among siblings of the same type.
:only-child Represents an element without any siblings.
:only-of-type Represents an element that has no siblings of same type.
:optional Represents an element that does not have a required attribute set on it.
:out-of-range Represents an element whose current value is outside the range limits.
:picture-in-picture Matches an element that is currently in picture-in-picture mode.
:placeholder-shown Represents any element that is currently displaying placeholder text.
:read-only Represents an element that is not editable by the user.
:read-write Represents an element that is editable by the user.
:required Represents an element that has a required attribute set on it.
:right Represents all right-hand pages of a printed document, used with @page at-rule.
:root Matches the root element of a document tree.
:scope Represents elements that are a reference point, or scope, for selectors to match with.
:target Represents the target element with an id matching the URL”s fragment.
:valid Represents any element whose contents validate successfully.
:visited Applies once the link has been visited.
:where() Takes a selector list as its argument and selects any element that matches.



Print Page




Previous



Next


Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *