CSS Selector 101

Why CSS selector are needed.

• CSS is used to design a website. This design is applied on HTML because HTML creates the structure of the website and decides the content. So, obviously, CSS is applied on HTML.

• In HTML, we use tags to add content. The same HTML tag can be used many times on one web page.
  So now the question is: how does CSS know which tag or element it should design?

• To solve this problem, we use CSS selectors. CSS selectors are used to select a specific HTML tag or element and apply CSS on it.

• The main purpose of using a CSS selector is only one thing: to choose which HTML element we want to style.

• So this is the main reason why we use CSS Selector.

Element Selector.

• Element selectors mean we select HTML elements and apply CSS to them. In simple words, we select a HTML tag and then apply CSS on it.

• If the selected tag is used more than one time in the same HTML file, then the CSS will be applied to all those tags. Even if the content and text inside those tags are different, the same CSS will apply to all of them. This happens because we are selecting the element by its tag name, not by its content.

• Below is a simple HTML and CSS example.

•   ## HTML file
  
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
  
    ## CSS file
  
    p {
      color: blue;
      font-size: 16px;
    }
  

Class Selector.

• CSS selectors are used when we want to style a particular HTML element. For this, we define a class attribute in HTML and give it a unique class name. Then in the CSS file, we write a dot (.) before the class name and apply the design to that class.

• One more reason to use a class is reusability. The class that we design in the CSS file can be used on other HTML elements as well, so they all get the same style. This means the style becomes centralized, and we do not need to write CSS again and again.

• For example, in Atomic CSS, all classes are already written. We only need to add the required class names in the HTML file according to the design we want. Tailwind CSS also follows the same concept. It already has predefined classes, and we just apply those classes to our HTML structure.

•   ## HTML file
  
    <p class="text">Hello World</p>
    <p>This is normal text</p>
  
    ## CSS file
  
    .text {
      color: blue;
      font-size: 18px;
    }
  

ID Selector.

• The ID selector is also used to style a particular HTML element. In this method, we give a unique ID to one HTML element and then select that ID in CSS to apply styles.

• In HTML, we define an ID inside the opening tag using the id attribute and give it a unique name.

• When we want to select that ID in CSS, we use the # symbol followed by the ID name. This is how the ID selector is used.

• Now you might think that the class selector also does the same job because it can also apply CSS to selected HTML elements. But the ID selector is more powerful.

• An ID can be used only once on a single HTML element, while a class can be used multiple times and can be centralized. An ID selector is like a student’s roll number — it is always unique. Also, the ID selector has higher priority than the class selector.

•   ## HTML file
  
    <h1 id="mainTitle">Welcome</h1>
  
    ## CSS file
  
    #mainTitle {
      color: green;
      font-size: 30px;
    }
  

Group Selectors.

• Group Selectors means when you are apply the same CSS code into multiple selector . Assume you have 3 different - different classes but want to apply a same CSS style code to that all 3 class , so to overcome this problem we use a group selector , it’s help us to reduce extra CSS line of code .

•   .btn, .link, .menu-item {
      background-color: black;
      color: white;
    }
  

Descendant Selectors.

• In CSS Descendant Selectors, we work with two HTML elements. One element is the parent, and the other is the child.

• If we want to style the child element separately, for example, change its color or background, we need a proper way to select it. To solve this problem, Descendant Selectors are used.

• In a descendant selector, we first write the parent element, and then we write the child element.

• This helps CSS understand exactly which child element should get the style. Using this method, CSS applies the design, only to the child element inside that parent.

## HTML file

<div>
  <p>This paragraph is inside div</p>
</div>

<p>This paragraph is outside div</p>

## CSS file 

div p {
  color: red;
}

Basic Selector Priority ( Very High Level ).

• When multiple CSS selectors target the same element, the browser follows a priority order to decide which style to apply. This is called CSS specificity.

• There are a total of four levels of priority in CSS. These priorities decide which selector has more power, to apply styles on an HTML element. When more than one CSS rule targets the same element, the selector with higher priority is applied.

Element Selector :

• Element selectors have the lowest priority in CSS. CSS reads the code from top to bottom. If the same element is styled again later in the CSS, the new style will overwrite the previous one. This means all tags of that element will get the latest style.

Class Selector :

• Class selectors are reusable, unlike IDs. They have higher priority than type element selectors but lower than IDs. Multiple classes can be combined for more specificity:

ID Selector :

• It has more priority because it will be initialize only one time in the HTML file that’s why they have a more priority over class.

Inline Style :

• It’s main reason why inline CSS more priority because they directly write the particular element or tag , when HTML load that inline CSS load directly with it that’s why more priority .

So that’s is my thought process on CSS Selectors. I hope you understand it .