Selectors in Depth!

What are selectors?

Ans) Selectors can be called as patterns used to select HTML elements. A HTML element can be selected in multiple ways. Various types of selectors are combined together to select a HTML element In simple words selectors are used to select HTML elements

TYPES OF SELECTORS

• General Selectors (Element, class, id, attribute)
• Universal selector ( * )
• Combinators
• Pseudo classes & Pseudo elements

1. General Selectors

General selectors are the most used selectors in CSS. General selectors include element selector, classes, id's, attributes. This selectors generally target a HTML element.

• Element Selector

  A element selector is used to select a particualr HTML element and style it. Element selectors are generally not used while writing CSS as there are multiple HTML elements with the same name. They are used in combination with other selectors as we will see further. To use element selector just write a tag-name.

  <h1>This is a sample text!</h1>
  <style>
    h1 {
      color: red;
    }
  </style>
  

• Class Selector

  Classes are the most used selectors while writing CSS. To use a classes just add a class attribute with a name to the HTML element. Classes can be used on multiple elements to give them the same style. A class selector is denoted using . (dot) in CSS.

  <h1 class="heading-text">This is a sample text!</h1>
  <style>
    .heading-text {
      color: red;
    }
  </style>
  

• Id Selector

  A ID selector can be used to style a single element. A ID selector should be unique to the HTML page. A # (hash) is used to define a ID in CSS.

  A ID is used in many different ways besides styling a element. It is advised to not style elements using id's and use ID's secifically for JS

  <h1 id="heading-text">This is a sample text!</h1>
  <style>
  #heading-text {
    color: red;
  }
  </style>
  

• Attribute Selector

  We can select a element having a particular attribute using the attribute selector. Custom attributes can also be implemented in HTML to select them. The attribute selector can be a replacement to the ID selector. Attriute selector is denoted by [ ] in CSS.

  <h1 my-custom-attribute="att">This is a sample text!</h1>
  <style>
  [my-custom-attribute="att"] {
  color: red;
  }
  </style>
  

2. Universal Selector

A universal selector is used to select everything on a HTML page. It is denoted using * (asterisk). It is generally used to set unchangeable properties on a website.

* {
  color: red;
}

3. Combinators

Combinators help developers to combine or group various selectors to select a specific element. They generally have higher specificity than other selectors.

TYPES OF COMBINATORS

Adjacent Sibling Combinator (+)

General Sibling Combinator (~)

Child Combinator (>)

Descendant Combinator (space)

• Adjacent Sibling Combinator (+)

  The adjacent sibling combinator is used to select a element when it is a immediate sibling of the first element. In adjacent sibling combinator both elements should have the same parent element. This combinator is denoted using ( + ) sign.

  <article>
   <h1>A heading</h1>
   <p>Lorem ipsum dolor sit amet</p>
  
   <p>But I must explain to you how all this mistaken idea.</p>
  </article>
  
  <style>
  h1 + p {
   font-weight: bold;
   background-color: #333;
   color: #fff;
   padding: .5em;
  }
  </style>
  

• General Sibling Combinator (~)

  As the name implies the general sibling combinator selects all the siblings of an element even if the second element is not directly adjacent to the first element. The ( ~ ) key is above the escape esc key.

  <article>
   <h1>A heading</h1>
   <p>I am a paragraph.</p>
   <div>I am a div</div>
   <p>I am another paragraph.</p>
  </article>
  
  <style>
   h1 ~ p {
     font-weight: bold;
     background-color: #333;
     color: #fff;
     padding: .5em;
   }
  </style>
  

• Child Combinator ( > )

  The child combinator is applied when a element is a direct child of the other element. Elements which are not direct descendent's of the parent element are not selected. It is denoted using ( > )

  <ul>
     <li>Unordered item</li>
     <li>Unordered item
         <ol>
           <li>Item 1</li>
           <li>Item 2</li>
         </ol>
     </li>
  </ul>
  
  <style>
     ul > li {
       border-top: 5px solid red;
     }
  </style>
  

• Descendant Combinator (space)

  The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

   <div class="box">
     <p>lorem ipsum</p>
       <span>
         <p>dolor semet</p>
       </span>
   </div>
  
   <style>
   .box p {
     color: red;
   }
   </style>
  

4. Pseudo classes & Pseudo elements

• Pseudo Classes

  Pseudo class is a selector which selects a element which is in a specific state. They act like you have added a new class to the element. Eg: When user hovers over a button or when a input is focused. These are called user-action pseudo classes i.e they are only triggered when a user interacts with the document. Other pseudo classes are applied to a element programatically, they donot require any user action to apply styles. There are many more types of pseudo classes you can find the whole list here.

    <p>Lorem ipsum dolor sit amet</p>
    <p>consectetur adipisicing elit. Earum, iste.</p>
  
    <button>Click Me</button>
  
    <style>
      p:first-child {
        color: red;
      }
  
      button:hover {
        background-color: red;
      }
    </style>
  

• Pseudo Elements

  Pseudo Elements are almost same as pseudo classes. The act as if you have added a whole new HTML element to the document. They are generally denoted using ( :: ) but please note that some pseudo-elements use the single colon syntax. There are many more types of pseudo element you can find the whole list here.

    <p>consectetur adipisicing elit. Earum, iste.</p>
  
    <style>
      p::after {
        content: "This is lorem ipsum text"
      }
    </style>