Master the Art of Specificity - CSS Selectors

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

* {
  property: value;
}

EXAMPLE

* {
  font-family: Arial, sans-serif; /*Setting a base font for all elements*/
}

Individual Selector

Targets elements based on their HTML tag name.

SYNTAX

element-name {
 ...
 }

EXAMPLE

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

.class-name {
 ...
 }

EXAMPLE

<p class="highlight">This paragraph will be highlighted.</p>
<h2 class="highlight">This heading will also be highlighted.</h2>

.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

#id-name { 
... 
}

EXAMPLE

<header id="main-header">This is the main header.</header>

#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

selector1 selector2 selector3 {
  /* styles to apply to elements matching all selectors */
}

EXAMPLES

• Targeting elements with multiple classes

<li class="bg-black text-white">item1</li>

 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

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

#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

property,property{
...
}

EXAMPLE

  span, li {
        background-color: #86673e;
      }

Inside an Element

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

SYNTAX

ancestor descendant {
 ...
 }

EXAMPLE

<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 */

   div ul li {
        background-color: #4b35f1;
      }

Direct Child

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

SYNTAX

parent > child { 
...
 }

EXAMPLE

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

/*<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

selector1 + selector2{
...
}

EXAMPLE

    <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>

 .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

selector1 ~ selector2 {
...
}

EXAMPLE

    <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>

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