CSS Selectors

CSS Selectors

Get to know about CSS Selectors and its uses ,types and a quick understanding about combinators

Compound Selector (1).jpg Compound Selector (1).jpg What do you mean by Selectors in CSS ?*

Selectors tell the browser which HTML element(s) should be targeted­čÄ» so that those elements could be styled. Styling any element is possible via Selectors ONLY.

There are manifold selectors , the ones which we are going through are :

What do you mean by Combinators in CSS ?

The kind of selectors that combine or explains/build relationship between different types of selectors .

  • UNIVERSAL SELECTOR (*)

The styling written is applied to the entire web document. Lets try to understand with an example of Netflix.

oHLdAz4e4.png So , most of the font-colors and white and go to any page the background is black. Do you think for every element the developers would have written separate CSS? Probably , not !!! So , in such cases where in the entire website we have to give some common styling be it background , color, font-size etc. We mostly use Universal selector.

//Syntax
*{style properties}
/*CSS to give white color to fonts and background as black
 in the site.*/
*{
    background-color: #000000;
    color: #FFFFFF
 }
// #000000 - black and #FFFFFF - white
  • TYPE SELECTOR

It means that the styling is applied to any and every element present. Again , if I talk about Netflix , all the buttons are of red color.

image.png So , in this kind of scenario when any type of element needs to be in specific manner or need to remove default styling to any kind of element , type selectors can be used.

//Syntax
element_name { style properties }
/*all the button's present background goes red and
 font color goes white*/
button{
background-color: #E20813;
color: #000000
}
  • CLASS SELECTORS(.)

Various elements can have same class. The selector is used when same or different kind of element(s) need to have a similar kind of styling.

Class Selector.jpg

//Syntax
.class_name { style properties }
/*all the elements having the class name of primary-color
 got the styling*/
.primary-color{
  color:#0000FF;
}
  • ID SELECTOR(#)

ID mean unique as we used to have roll-numbers in schools/colleges . So , ID selector needs to be unique. Now what does this mean? This means that the two HTML elements should not have same ID name , every HTML element which has the attribute of ID should have a different name. And then using ID selector , the element with the ID of same name gets the styling.

ID Selector.jpg

//Syntax
#element_name { style properties }
//The element that has the id-name as list-item1 got the styling
#list-item1{
   padding: 10px;
   background-color: #ffff00
}
  • COMPOUND SELECTOR

You can refer to them as chaining/and selector because this is what it does i.e. chain different selectors(as we have read so far) without any space. Let's try to understand what different chaining mean with the help of examples.

//Example1
p.primary#txt1{
 border: 5px solid #000000;
 color:#ad01ad;
}
/* This means a p tag which has a class "primary "
AND also has an id of "txt1" will get the styling 
*/

//Example2
input.btn.primary{
 background-color: #6495ed;
 border: 5px solid #ffff00;
 color: #ffffff;
}
/* This means an input tag which has a class "btn"
AND also has a class of "primary" will get the styling 
*/

Compound Selector (1).jpg NOTE: No space among the selectors.

  • SELECTOR LIST/COMBINED SELECTOR(,)

It is used when same CSS is applied to different kind of elements via tag/class or id selectors. All the selectors separated by comma(,) gets the styling. Selector List.jpg

// Syntax: selector1 , selector2 {}
/* All the span element , the element with the id of 
"list-item1" and the elements with the class name of
 "para" got the styling */
span,
#list-item1,
.para {
  background-color: #ffff00;
  padding: 10px;
  color: #ff0000;
}
  • DESCENDANT COMBINTOR( ) The whitespace( ) between the selectors represent descendant combinator(inside an element). Let's throw some light on it with the aid of an example
//Syntax: selector1 selector2{}
 div li {
  color: #ff0000;
 }
/*This means any "li" present inside the div AT ANY LEVEL ,
 be it direct child, grand-child, great-grand child 
and so on will get the styling.
*/

Descendant Selector.jpg NOTE : Space between the selectors is a must.

  • CHILD COMBINATOR(>)

The only difference between descendant and child combinator is that the CSS will only apply to the direct child of the parent and NOT on all children at any level.

//Syntax: selector1 > selector2{}
 div > li {
  color: #ff0000;
 }
/* This means any "li" present in the div 
as a DIRECT CHILD gets the styling.*/

Child Selector (1).jpg

  • ADJACENT SIBLING COMBINATOR(+)

As adjacent mean next to something , similarly adjacent sibling combinator mean the styling would go to the immediate next sibling

//Syntax: former_element + target_element { style properties }
 .list-item2 + li {
   color: #ff0000;
   font-style: italic;
}
/*This means the styling goes to IMMEDIATE NEXT SIBLING of the element
which has the class of list-item2*/

Adjacent Sibling Selector.jpg

NOTE: Had there been NO IMMEDIATE target element the CSS would'nt apply

  • GENERAL SIBLING COMBINATOR(~) The styling applies to all the siblings immediate or not that are next to the former_element and satisfy the condition after (~). In our example the condition is the class should be "amazing".
    //Syntax: former_element ~ target_element { style properties }
    .list-item2 ~ .amazing {
    color: #ff0000;
    font-style: italic;
    }
    /*This means the styling goes to ALL the NEXT SIBLING(s) 
    which has the class of "amazing" of the element 
    ( class="list-item2"). 
    It isn't necessary whether the elements are immediate 
    or not*/
    
    General Sibling Selector.jpg

SUMMARY To summarize the selectors and combinators covered in the article are : CSS Selectors (2).png Different selectors(also combinators that are type of selectors) and different ways can be used to achieve the same output . The situation and the code in hand should decide your best way to approach towards the output needed.

Here you can download all the code files used in the article: github.com/Parul1999/CSS-Selectors

Did you find this article valuable?

Support Parull Kohhli by becoming a sponsor. Any amount is appreciated!