CSS pseudo-classes

    In this CSS tutorial, we will be going through the concept of Pseudo-classes and how we use them. And by the end of this tutorial, you will have a brief idea about what are pseudo-classes and how many of them are present in CSS.

    What are Pseudo-classes?

    A pseudo-class defines the state of an element, and using it we can have different styling for the same element at different states. An element can have more than one states, for instance, the element has a different state when a mouse hover it, or a list can have different states where it is clicked or visited. Syntax This is the syntax of a pseudo-class.

    selector:pseudo-class {
      property: value;
    }

    Anchor tag Pseudo-classes

    An anchor tag can have 4 different states, link, visited, hover and active .

    • The link state defines the default state of the anchor tag which hasn’t clicked or visited.
    • The visited state defines if the user has already clicked on the link.
    • The hover state defines if the mouse is hovered over the link.
    • The active state defines when the user clicks on the link.

    Example

    <!DOCTYPE html>
    <html>
       <head>
          <style>
            /* unvisited link */
            a:link {
              color: green;
             }
           /* visited link */
           a:visited {
             color: red;
           }
           /* mouse over link */
            a:hover {
              color: yellow;
            }
    
            /* selected link */
             a:active {
             color: blue;
            }
         </style>
       </head>
       <body>
    
          <b><a href="https://www.techgeekbuzz.com" >TechGeekBuzz</a></b>
       </body>
    </html>

    CSS Pseudo-classes and CSS classes

    CSS class are generally used as a selector when we want the same styling for different elements with the same class name. And like other selectors, CSS classes can be used with pseudo-classes.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .homepage:hover {
                  color: green;
                }
            </style>
        </head>
        <body>
            <b><a href="https://www.techgeekbuzz.com" class="homepage">
                TechGeekBuzz
                </a></b>
        </body>
    </html>

    The hover: pseudo-class

    The hover pseudo-class is not limited to the anchor tag, it can be used with any HTML element.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                p{
                    color: yellow;
                    background-color: blue;
                }
                p:hover {
                  color: white;
                  background-color: black;
                }
            </style>
        </head>
        <body>
            <p>Welcome to TechGekkBuzz.</p>
        </body>
    </html>

    Create a simple ToolTip using :hover pseudo-class

    A simple ToolTip can be created using a : hover class and display:block property value pair.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                p {
                  display: none;
                  color: white;
                  background-color: black;
                }
                /*Activate display block when mouse hover over the div*/
                div:hover p {
                  display: block;
                }
            </style>
        </head>
        <body>
            <div> Hover Over Me!
                <p>Welcome to TechGekkBuzz.</p>
            </div>
        </body>
    </html>

    CSS :first-class Pseudo-class

    As the name suggests the pseudo-class :first-child define an element which is the first child of another element.

    Syntax

    p:first-child {property:value;}

    It will select all those paragraph which are the first child of their parent.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
               /*Select all paragraphs which are the first child*/
                p:first-child {
                  color: white;
                  background-color: black;
                }
            </style>
        </head>
        <body>
            <p>First Child of body </p>
            <p>Second Child of body </p>
            <div>
                <p>First Child of Div</p>
                <p>Second Child of div</p>
            </div>
        </body>
    </html>

    CSS :lang Pseudo-class

    Using : lang pseudo-class we can define different rules for different languages, for instance, if we want to change the double inverted comma(“ ”) of <q> tag with # hash symbol.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
               q:lang(hash) {
                  quotes: "#" "#";
                }
            </style>
        </head>
        <body>
            <q lang="hash">This is a Quotation</q>
        </body>
    </html>

    Pseudo-Classes Lists

    There are more than 60 pseudo-classes present in CSS. And there are many which are not supported by most of the browsers. So before using a pseudo-class make sure that it is supported by every browser.

    Pseudo-class Example Description
    :active a:active Define the <a> state when the user click on it.
    :checked input:checked Define if the input box is checked.
    :disabled input:disabled It select those input elements which are disabled.
    :empty div:empty Select those div element which do not have any children.
    :enabled input:enabled Select all enabled input elements.
    :first-child p i:first-child Select all the <i> elements which are the first children of a <p> element.
    :first-of-type p:first-of-type Select the first <p> element if it is a child.
    :focus input:focus Define the input state when user click on it.
    :hover a:hover Define the element state when the user hovers the mouse over the <a> tag.
    :in-range input:in-range Define the input state if value is in specified range.
    :invalid input:invalid Select those input elements which are not valid.
    :lang( language ) q:lang(hash) Select the <q> element with has an attribute of lang with value hash.
    :last-child p:last-child Select all <p> elements if it is the last children of its parent.
    :last-of-type p:last-of-type Selects the last <p> child of every parent element.
    :link a:link Define the <a> element state when it is unclick or unvisited.
    :not(selector) :not(div) Select all elements except <div>
    :nth-child(n) p:nth-child(3) Selects those <p> elements which are the 3 rd child of their parent.
    :nth-last-child(n) p:nth-last-child(3) Selects those <p> elements which are the 3 rd last element of their parent.
    :nth-last-of-type(n) p:nth-last-of-type(3) Select the 3 rd last <p> element of its parent.
    :nth-of-type(n) p:nth-of-type(3) Select the 3 rd <p> element of its parent.
    :only-of-type p:only-of-type Select those <p> elements if they are the single <p> element of their parents.
    :only-child p:only-child Select those <p> elements which are the single child of their parents.
    :optional input:optional Select those input boxes with no require attribute.
    :out-of-range input:out-of-range Select the input boxes whose value is out of range.
    :read-only input:read-only Select input boxes with read only attribute
    :read-write input:read-write Select input boxes with no readonly attribute
    :required input:required Select input boxes with required attribute
    :root root Select the root element.
    :target #goto:target Selects the #goto element which is linked to an anchor tag with id “goto”.
    :valid input:valid Select input boxes with valid
    :visited a:visited Define the anchor tag if it is visited.

    CSS Pseudo-Class Summary

    • pseudo-classes define the different state of an element.
    • It can be used for providing different styling for different states for the same element.
    • pseudo-class can work with any type of CSS selector.

    People are also reading: