Master the Art of Specificity - CSS Selectors
Tags: css, webdev
Published: 2024-01-25 13:39:01

## Universal Selector

> It's a CSS selector that matches all elements on a web page, regardless of their type, class, or ID.Represented by a single asterisk symbol (*)

_SYNTAX_
```css
* {
  property: value;
}
```
_EXAMPLE_
```css
* {
  font-family: Arial, sans-serif; /*Setting a base font for all elements*/
}
```
## Individual Selector 

> Targets elements based on their HTML tag name.

_SYNTAX_
```css
element-name {
 ...
 }
```
_EXAMPLE_
```css
p {
  background-color: #d1ea76; /* All paragraphs will have this background color */
}

h1 {
  font-size: 2rem; /* All headings of level 1 will have this font size */
}
```
## Class and ID Selector 

> **Class Selector**: Target multiple elements that share common styles.Useful for styling groups of elements with similar formatting.Can be applied to any number of elements.

_SYNTAX_
```css
.class-name {
 ...
 }
```
_EXAMPLE_
```html
<p class="highlight">This paragraph will be highlighted.</p>
<h2 class="highlight">This heading will also be highlighted.</h2>
```
```css
.highlight {
  background-color: yellow;
}
```

> **ID Selector**: Target a unique, single element on the page.Should only be used once per page.More specific than any other selector.Ideal for targeting specific elements for unique styling or JavaScript interactions.

_SYNTAX_
```css
#id-name { 
... 
}
```
_EXAMPLE_
```html
<header id="main-header">This is the main header.</header>
```
```css
#main-header {
  background-color: blue;
  color: white;
}
```
## And Selector (chained)

> Chained selectors increase specificity, allowing you to create more precise targeting rules.They can be used to target elements based on their nesting structure, their combination of classes, or their relationship to other elements in the document.It's essential to use them carefully to avoid unintended style conflicts or overly complex CSS rules.

_SYNTAX_
```css
selector1 selector2 selector3 {
  /* styles to apply to elements matching all selectors */
}
```
_EXAMPLES_
- Targeting elements with multiple classes
```html
<li class="bg-black text-white">item1</li>
```
```css
 li.bg-black.text-white {
        background-color: #000; /* /* Targets elements with both classes "bg-black" and "text-white" */
}*/
        color: #fff;
      }
```
- Combining element, class, and ID selectors
```css
ul li.active a#main-link {
  text-decoration: underline; /* Targets links with ID "main-link" within active list items within unordered lists */
}
```
- Targeting elements within a specific section
```css
#main-content p {
  font-size: 16px; /* Targets paragraphs within the element with ID "main-content" */
}
```
## Combined Selector

> Combination of properties and separated by comma's

_SYNTAX_
```css
property,property{
...
}
```
_EXAMPLE_
```css
  span, li {
        background-color: #86673e;
      }
```
## Inside an Element

> Select elements that are descendants of other elements, regardless of their nesting level.

_SYNTAX_
```css
ancestor descendant {
 ...
 }
```
_EXAMPLE_
```html
<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li> 
        <li>highlight me</li>
      </ul>
    </div>
/*Both <li> will be get background-color, as <li> is the descendant <ul> i.e <ul> is ancestor and similarly <ul> is descendant i.e <div> is ancestor */
```
```css
   div ul li {
        background-color: #4b35f1;
      }
```
## Direct Child

> Select only direct children of an element, not grandchildren or deeper descendants.

_SYNTAX_
```css
parent > child { 
...
 }
```
_EXAMPLE_

```html
<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
    </div>
```

```css
/*<p>,<li> and <ul> direct of <div>, so <p>,<li> and <ul> are siblings*/
  div > li {
        background-color: #7667e4;
      }
```
## Sibling Selector ~ and +

> Sibling selectors are used to target elements based on their relationship to other elements that share the same parent.

- Adjacent Sibling Selector (+)

> Selects elements that immediately follow another specific element, with no other siblings in between.

_SYNTAX_
```css
selector1 + selector2{
...
}
```
_EXAMPLE_
```html
    <section>
      <p class="sibling">Test 1</p>
      <p>Test 2</p> /*Test 2 will be targed and background color will get pink (immediate next)*/
      <p>Test 3</p>
      <p>Test 4</p>
      <p>Test 5</p>
    </section>
```
```css
 .sibling + p {
        background-color: pink;
      }
```

- General Sibling Selector (~)

> Selects elements that follow another specific element, but they don't have to be immediately adjacent.

_SYNTAX_
```css
selector1 ~ selector2 {
...
}
```

_EXAMPLE_

```html
    <ul>
      <li>Reading exciting novels.</li> /*Except this all the <li> will be targeted.*/
      <li>Listening to uplifting music.</li>
      <li>Hiking in the fresh air.</li>
      <li>Trying new and delicious recipes.</li>
      <li>Spending time with loved ones.</li>
    </ul>
```

```css
      li ~ li {
        /* Targets all list items except the first one */
        background-color: #4e4949;
      }
```