Home/ Questions/Q 7998

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-28T09:02:11+00:00

Master the Art of Specificity – CSS Selectors

  • 60k

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; }
Enter fullscreen mode Exit fullscreen mode

EXAMPLE 

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

Individual Selector

Targets elements based on their HTML tag name.

SYNTAX 

element-name {  ...  }
Enter fullscreen mode Exit fullscreen mode

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 */ }
Enter fullscreen mode Exit fullscreen mode

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 {  ...  }
Enter fullscreen mode Exit fullscreen mode

EXAMPLE 

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

.highlight {   background-color: yellow; }
Enter fullscreen mode Exit fullscreen mode

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 {  ...  }
Enter fullscreen mode Exit fullscreen mode

EXAMPLE 

<header id="main-header">This is the main header.</header>
Enter fullscreen mode Exit fullscreen mode 

#main-header {   background-color: blue;   color: white; }
Enter fullscreen mode Exit fullscreen mode

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 */ }
Enter fullscreen mode Exit fullscreen mode

EXAMPLES

  • Targeting elements with multiple classes 
<li class="bg-black text-white">item1</li>
Enter fullscreen mode Exit fullscreen mode 

 li.bg-black.text-white {         background-color: #000; /* /* Targets elements with both classes "bg-black" and "text-white" */ }*/         color: #fff;       }
Enter fullscreen mode Exit fullscreen mode

  • 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 */ }
Enter fullscreen mode Exit fullscreen mode

  • Targeting elements within a specific section 
#main-content p {   font-size: 16px; /* Targets paragraphs within the element with ID "main-content" */ }
Enter fullscreen mode Exit fullscreen mode

Combined Selector

Combination of properties and separated by comma's

SYNTAX 

property,property{ ... }
Enter fullscreen mode Exit fullscreen mode

EXAMPLE 

  span, li {         background-color: #86673e;       }
Enter fullscreen mode Exit fullscreen mode

Inside an Element

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

SYNTAX 

ancestor descendant {  ...  }
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode 

   div ul li {         background-color: #4b35f1;       }
Enter fullscreen mode Exit fullscreen mode

Direct Child

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

SYNTAX 

parent > child {  ...  }
Enter fullscreen mode Exit fullscreen mode

EXAMPLE 

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

/*<p>,<li> and <ul> direct of <div>, so <p>,<li> and <ul> are siblings*/   div > li {         background-color: #7667e4;       }
Enter fullscreen mode Exit fullscreen mode

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{ ... }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 

 .sibling + p {         background-color: pink;       }
Enter fullscreen mode Exit fullscreen mode

  • General Sibling Selector (~)

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

SYNTAX 

selector1 ~ selector2 { ... }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 

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

csswebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,