Pseudo Selector (Target Selector)

Hello Friends,

Today in this blog we can create Pseudo Selector (Target Selector). Earlier I have shared a blog on Bootstrap Dropdown Menu.

Pseudo selector

The Pseudo selector are used to change the appearance of existing element by using a pseudo name. They are define by using ” : “ along with element name or class name.

Syntax:

/*-----The syntax of pseudo-classes ------------*/

selector:pseudo-class {
  property: value;
}

:target

It is selector use for applying effects for any element that becomes a target in the page. The element must be define with an ID and and the ID are refer from URL using ” # “

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <style>
        .section{
            border:solid 1px black;
            margin: 10px;
            padding: 10px;
        }
        .section:target{
            background-color:green;
            color:white;
        }
        </style>
    </head>
     <title>Target selector by Codeithub </title>
    <body>
        <header>
            <a href="#html">HTML</a>
            <span>|</span>
            <a href="#css">CSS</a>
            <span>|</span>
            <a href="#js">java script</a>
        </header>
        <section style="margin-top: 30px;">
        <div id="html" class="section"> HTML tutorial</div>
        <div id="css" class="section"> css tutorial</div>
        <div id="js" class="section"> java script tutorial</div>
        </section>
    </body>
</html>

Leave a Reply

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