• CSS selectors are used to select the HTML Elements.

  Syntax

    selector{
        property:value;
    }
  

Universal Selectors

• '*' selects all elements of HTML.

    *{ 
        margin:0; 
        padding:0; 
        outline:0;
    }
  

Simple Selectors

• Simple Type Selector

  • Selects HTML Element based on the Element name.

  • Select all HTML Element Specified.

      body{
          width:100vw;
          height:100vh;
      }
    

• Simple Class Selector

  • Selects HTML Element based on its class name.

  • We can assign the same class for more than one element. So that Similar Properties to be applied can be selected at once.

       .box{
          border: 2px solid black;
          width:100px;
          height:100px;
      }
    

• Simple ID Selector

  • Selects HTML Element based on its id.

  • ID can be assigned to one HTML element. So that we can specifically access one element and apply CSS properties.

      #warning{
          color:red;
          font-size:18px;
      }
    

Attribute Selector

• CSS [attribute] Selector

  • Selects Elements with Specified attributeattr .

      a[target] {
          text-decoration:none;
          color:hotpink;
      }
    

• CSS [attr=value] Selector

  • Selects elements with an attribute attr and matching value[attr=value] .

      <a href="https://developer.mozilla.org/">MDN</a>
      <a href="https://ineuron.ai/" target="_blank">ineuron.ai</a>
    

• CSS [attr*=value] Selector

  • Select elements with attribute attr and value containing value.

       a[href*="blog"] {
           color:blue;
       }
    

• CSS [attr^=value] Selector

  • Selects elements with attribute attr and value begin with value.

      a[href^="https"]{
          color:blue;
      }
    

• CSS [attr$=value] Selector

  • Selects elements with attribute attr and value ends with value.

      a[href$=".com"]{
          color:blue;
      }
    

• CSS [attr~=value] Selector

  • Selects elements with attribute attr and value contains the word value.

  • Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

      a[class~="logo"] {
          padding: 2px;
      }
    

Grouping Selectors

• Selector List

  • Selector List , selects all the comma-separated matching nodes.

      nav,main{
          border:2px solid black;
      }
    

Combinators

• Descendant combinator

  • The descendant combinator selects all the matching descendant nodes of a given node.

  • It is represented by " "(space) which combines two selector selector1 selector2 such that an element is matched by selector2 if it has any ancestor(parent or grandparents) matching selector1 .

      /* Irrespective of any level, it selects all the div that is present inside body*/
      body div{
      color:black;
      }
    

• Child combinator >

  • The child combinator selects all matching elements that are children of the specified element.

  • In child combinators > is placed between two selectors selector1>selector2.It matches by selector2 which is direct children of selector1.

      /*selects all <p> elements that are children of a <div> element*/
      div > p {
        background-color: yellow;
      }
    

• Adjacent sibling combinator

  • An adjacent sibling combinator is used to select elements which is immediately next matching element of the specified element.

  • + is placed between two selectorsselector1+selector2 which is matched by the second selector if it is an adjacent element of the first selector.

      /*  selects the first <p> element that are placed immediately after <div> elements*/
      div + p {
        background-color: yellow;
      }
    

• General sibling combinator

  • The general sibling combinator selects all matching elements that are siblings to the specified element.

  • ~ is placed between two selector selector1~selector2 which is matched by a second selector that are following the first element (need not be very next adjacent).

Pseudo Element Selector

• A pseudo-element selector is used to select a part of the elements.

• It can be used to select

  • ::first-letter of an element.

  • ::first-line of an element.

  • ::after an element.

  • ::before an element.

  • ::placeholder of input element. etc

Pseudo class selector

• A pseudo-class selector is used to define the special state of the specified element.

• It can be used to select

  • :read-only : represents an element that cannot be changed by the user.

  • :first-child : matches an element which is the first child.

  • :last-child: matches an element which is the last sibling.

  • :nth-child: matches an element which is an nth-child.

  • :hover : matches when the user hovers over an element with the cursor.

      textarea:read-only {
        border: 0;
      }
      li:first-child{
        color: blue;
      }
      li:last-child{
        color: blue;
      }
      /* Selects second child */
      li:nth-child(2){
      }
      button:hover {
        background-color: blue;
      }