CSS Selectors & Pseudo Selectors

CSS Selectors & Pseudo Selectors

1.CSS SELECTOR

CSS selectors are used to select the content you want to style. CSS provides you with a number of different ways to do.

  1. UNIVERSAL SELECTOR

  2. INDIVIDUAL SELECTOR

  3. CLASS AND ID SELECTOR

  4. COMBINED SELECTOR

  5. INSIDE AN ELEMENT SELECTOR

  6. DIRECT CHILD SELECTOR

  7. SIBLING SELECTOR

UNIVERSAL SELECTOR

CSS universal selector is denoted using asterisk(*). It can be used to select any and all types of elements in an HTML page. This selector is useful when we want to select all the elements on the page.

  • SYNTAX

*** { style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        *{
            background-color: #435;
            color: whitesmoke;
        }
    </style>
</head>
<body>
  <h1>INTRO TO CSS</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam et harum laborum amet qui consectetur non. Deleniti repellat perspiciatis rerum.
  </p>  
</body>
</html>

OUTPUT

FJS.png

  • INDIVIDUAL SELECTOR

This selector is useful when we want to select a particular element on the page.

  • SYNTAX

**element{ style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        h1{
            background-color: rgb(134, 96, 55);
            color: whitesmoke;
            text-align: center;
        }
        p{
            background-color: rgb(134, 96, 55);
            color: whitesmoke;
            text-align: center;
        }
    </style>
</head>
<body>
  <h1>iNEURON</h1>
  <p>iNeuron started as a product development company, then launched its ed-tech division. We provide 360 degree solutions from learning to internship to finding a job, and the first ever educational OTT platform to upgrade your skill set.</p>
</body>
</html>

OUTPUT

FJS1.png

  • CLASS AND ID SELECTOR

The class selector selects elements with a specific class attribute. It matches all the HTML elements based on the contents of their class attribute. The **(.)**symbol, along with the class name, is used to select the desired class. The **ID selector **matches an element based on the value of its id attribute. In order for the element to be selected, its ID attribute must exactly match the value given in the selector. The (#) symbol and the id of the HTML element name are used to select the desired element.

  • SYNTAX

.class-name { style properties }

#id-name { style properties }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
       .main {
            background-color: #FFAFA4;
        }

    #demo {
    background-color: #DEDAF7;
    }
    </style>
</head>
<body>
    <div class="main">
        <h3>Welcome to FJS2.0!</h3>
        <p id="demo">with an ID</p>
        <p>with no ID</p>
      </div>
</body>
</html>

OUTPUT

FJS2.png

  • COMBINED SELECTOR

This selector is useful when we want to select multiple elements on the page.

  • SYNTAX

**element1,element2{ style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
       .main {
            background-color: #FFAFA4;
        }

    </style>
</head>
<body>
    <div class="main">
        <h3>Welcome to FJS2.0!</h3>
        <p id="demo">HITESH SIR</p>
        <p>ANURAG SIR</p>
      </div>
</body>
</html>

OUTPUT

FJS.png

  • INSIDE AN ELEMENT SELECTOR

The inside an element selector is used to select elements with a specific parent.

  • SYNTAX

**element1 element2 element3{ style properties } **

** element1>element2>element3{ style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body{
        background-color: antiquewhite;
    }
     div ul li{
        background-color:white;
        color: blueviolet;
     }
    </style>
</head>
<body>
    <h1>HITESH SIR</h1>
    <div class>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ul>
      </div>
      <h2>ANURAG SIR</h2>
    <div class>
        <ul>
            <li>JAVASCRIPT</li>
            <li>JAVASCRIPT</li>
            <li>JAVASCRIPT</li>
        </ul>
      </div>
</body>
</html>

OUTPUT

FJS1.png

  • DIRECT CHILD SELECTOR

The CSS child selector uses the** > character **to target an element that is a direct child of a specified parent.

  • SYNTAX

**element1 element2{ style properties } **

** element1>element2{ style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body{
        background-color: antiquewhite;
    }
     div ul{
        background-color:white;
        color: blueviolet;
     }
    </style>
</head>
<body>

    <div class>
        <h1>HITESH SIR</h1>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ul>
      </div>

    <div class>
        <h2>ANURAG SIR</h2>
        <ol>
            <li>JAVASCRIPT</li>
            <li>JAVASCRIPT</li>
            <li>JAVASCRIPT</li>
        </ol>
      </div>
</body>
</html>

OUTPUT

FJS2.png

  • SIBLING SELECTOR

The sibling selector (+ (or)~) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

  • SYNTAX

**element1~element2{ style properties } **

** element1+element2{ style properties } **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body{
        background-color: antiquewhite;
    }
     .sibling+li{
        background-color:white;
        color: blueviolet;
     }
    </style>
</head>
<body>

    <div>
        <h1>HITESH SIR</h1>
        <ul>
            <li class="sibling">HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ul>
      </div>

    <div>
        <h2>ANURAG SIR</h2>
        <ol>
            <li class="sibling">JAVASCRIPT</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
        </ol>
      </div>
</body>
</html>

OUTPUT

FJS3.png

2.PSEUDO SELECTORS

Pseudo class selectors are CSS selectors with a **colon preceding **them. For Example, changing the style of an element when the user hovers over it.

  1. BEFORE

  2. AFTER

  • BEFORE

The **::before **pseudo-element can be used to insert some content before the content of an element.

  • SYNTAX

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body{
        background-color: antiquewhite;
    }
    .user::before{
        content:'';
        display: block;
        width: 10px;
        height:10px;
        background-color: blue;
        }

    </style>
</head>
<body>
    <form action="#">
    <div>
        <label class="user" for="name">USERNAME:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label class="user" for="password">PASSWORD:</label>
        <input type="password" name="password" id="password">
    </div>
    <button>Login</button>
</form>
</body>
</html>

OUTPUT

FJS6.png

  • AFTER

The **::after **pseudo-element can be used to insert some content after the content of an element.

  • SYNTAX

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body{
        background-color: antiquewhite;
    }
    .user::after{
        content:'';
        display: block;
        width: 10px;
        height:10px;
        background-color: blue;
        }

    </style>
</head>
<body>
    <form action="#">
    <div>
        <label class="user" for="name">USERNAME:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label class="user"for="paaword">PASSWORD:</label>
        <input type="password" name="password" id="password">
    </div>
    <button>Login</button>
</form>
</body>
</html>

OUTPUT

FJS5.png