CSS Selectors 

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS Selectors</title>
  <style>
    /* Element Selector */
    p {
      color: red;
    }

    /* Class Selector */
    .my-class {
      background-color: yellow;
    }

    /* ID Selector */
    #my-id {
      font-size: 20px;
    }

    /* Attribute Selector */
    [type="text"] {
      border: 1px solid black;
    }

    /* Universal Selector */
    * {
      margin: 10px;
      padding: 0;
    }

    /* Descendant Selector */
    div p {
      font-weight: bold;
    }

    /* Child Selector */
    ul > li {
      list-style-type: square;
    }

    /* Adjacent Sibling Selector */
    h2 + p {
      margin-top: 20px;
    }

    /* General Sibling Selector */
    h2 ~ p {
      color: blue;
    }

    /* Pseudo-class */
    a:hover {
      text-decoration: underline;
    }

    /* Pseudo-element */
    p::first-line {
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>This is a Heading</h1>
  <p class="my-class">This is a paragraph with a class.</p>
  <p id="my-id">This is a paragraph with an ID.</p>
  <input type="text" placeholder="Enter text">
  <div>
    <p>This is a paragraph inside a div.</p>
  </div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <h2>Subtitle</h2>
  <p>This paragraph follows the subtitle.</p>
  <a href="#">Link</a>
  <p>This is the first line of a paragraph.</p>
</body>
</html>

Code Output

CSS Selectors

There are several types of selectors in CSS:

    • Element Selector: Selects elements based on their HTML tag name. For example, p selects all <p> elements.
    • Class Selector: Selects elements based on their class attribute value. For example, .my-class selects all elements with class="my-class".
    • ID Selector: Selects an element based on its unique ID attribute value. For example, #my-id selects the element with id="my-id".
    • Attribute Selector: Selects elements based on their attribute values. For example, [type="text"] selects all elements with type="text".
    • Universal Selector: Selects all elements on the page. It is represented by an asterisk (*).
    • Descendant Selector: Selects elements that are descendants of another element. For example, div p selects all <p> elements that are descendants of <div> elements.
    • Child Selector: Selects elements that are direct children of another element. For example, ul > li selects all <li> elements that are direct children of <ul> elements.
    • Adjacent Sibling Selector: Selects an element that immediately follows another element. For example, h2 + p selects the <p> the element that directly follows an <h2> element.
    • General Sibling Selector: Selects elements that are siblings of another element. For example, h2 ~ p selects all <p> elements that are siblings of <h2> elements.
    • Pseudo-classes: Selects elements based on a specific state or condition. For example, a:hover selects <a> elements when hovered over by the mouse.
    • Pseudo-elements: Selects and styles specific parts of an element. For example, p::first-line selects the first line of <p> elements.