CSS Selectors 101

CSS selectors are needed to callout the specific selectors while styling the webpage when we are not using inline style and styling with a style tag in the head or using an external page.

Element Selector: It selects the HTML elements by their name.

ID Selector: It selects the HTML elements by their id and it’s unique for an element in the whole webpage. The symbol used is #id-name followed by the id-name.

Class Selector: It selects the HTML elements by their class. Many HTML elements can belong to the same class. The symbol used here is .class-name

Group selectors: It selects the group of HTML elements together. The way to select them is by writing the HTML element names, separated by commas. h1, h2.

When there are so many selector how is the priority of the selector decided so that there is an order in which they dominate over other selectors? This is called specificity of style in CSS.

There is also a specific order of the css as well, depending on where you are targeting the HTML elements.

Let's understand the css selectors in detail:

the tree like structure of the HTML code when laid out on the web page

In the tree structure, there is a hierarchy that exists.

1. The top element is called the parent element

2. The direct descendants of that element are called the child elements

3. all the other second-level and other lower-level descendants are called relatives, as we can’t keep calling sub-child and sub—sub—sub—sub -child

4. The two elements at the same level are called the siblings

1. Universal Selector

      /* selects all the elements on the webpage */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

1. Type Selector

   1. helps you select the specific type of element on the webpage

    p {
           font-size: 20px;
       }
   

2. Class Selectors

   1. How to target the specific class of elements

      1. Just put a dot before its name in the css

      .highlight {
        background-color: #73dff3;
      }

1. Id Selector

   1. According to the norm, you should have one unique id on one webpage

      #header {
        background-color: #333fff;
        color: white;
      }

To maintain the consistency of the colors we use hash codes for the colours so that different browsers don't render different colours for different colour names according to them.

1. Attribute Selector

   1. to select the specific attribute of the element

the name of the element and the square bracket to select the name of the attribute and its type

      input[type="text"] {
        border: 1px solid #73dff3;
      }

1. Descendant Selector

   1. to select the descendants of the elements

There is space between the read them from right to left

      article p {
        font-style: italic;
        background-color: #333fff;
        color: #fff;
        padding: 2px;
      }

1. Child Selector

   1. The way to directly select the child of an element

the > greater than symbol is used

div > p{
        background-color: #b73a3a;
        }

This sometimes overwrites the css selection patterns into other elements, so it is better touse classes

1. Adjacent sibling selector

   1. The sibling selector, which is the nearest to the element

it uses the + symbol

h1 + p {
        font-family: "Courier New", Courier, monospace;
      }

1. General Sibling Selector

   1. How to select the siblings in general

it uses the ~ ****(tilde) symbol

h2 ~ p {
        background-color: blueviolet;
        color: white;
      }

1. Pseudo Class Selector

2. certain classes that exist based on certain events of certain elements

pseudo class is attached by a colon (:) to the element name

      a:hover {
        background-color: orange;
        text-decoration: none;
        padding: 2px;
        margin: 6px;
        color: white;
      }

1. Pseudo Element Selector

2. The element selected is selected based on its specified existence

double colons (::) are used

      p::first-letter{
        font-weight: bold;
        font-style: italic;
        font-size: x-large;
      }

1. Grouping Selector

2. The way to select elements in a group

elements are separated by commas

      h1, h2, h3 {
        color: green;
      }

Adios!