CSS Selectors

Many of us are familiar with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) as they are the core technologies used for Front End Web Development, one of it is used to construct and layout the webpage, and another one is responsible for the styling, and appearance of the webpage

The browser first layouts the structure of the page and then combines the CSS styles to the document. But, ever wondered how does the browser come to know which styling is to be applied to which element in external CSS? Here, CSS Selector plays the role.

CSS Selectors select the HTML element. and apply the set of CSS rules to the selected element.
The CSS Selectors are classified into five types.

Simple Selectors

Simple Selectors are the most basic type of selectors as it selects the HTML elements based on the type of element, id, and class.

1. Type Selector

   Type Selector will select all the elements in the document of the type mentioned.
   
   Syntax:

   

2. Class Selector

   A Class attribute applies the same set of CSS rules on more than one element.
   Class Selector will select all the elements which have a class attribute as the mentioned class name.
   
   eg. class="class-name" It will select all the elements having class name as class-name.
   
   Syntax:

   

3. Id Selector

   An Id attribute is assigned when the element is unique.
   Id Selector will select the element which has an Id attribute as the mentioned Id name.
   
   eg. id="id-name" It will select the element having id as id-name.
   
   Syntax:

   

4. Universal Selector

   Universal Selector selects all the elements of a document or selects all the elements of type, class, or id mentioned.
   
   Syntax:

   

Combinators

Combinators combines the selectors by means of their relationship with each other

1. Descendant Selector

   The Descendant Selector selects all the descendants of the specified element.
   
   eg. select all < p> elements which are present within a < div> element irrespective of its level within the < div> block.
   
   Syntax:

   

2. Child Selector

   The Child Selector selects all child elements of a specified type of a specified parent element.
   
   eg. select all < p> elements which are directly connected to the < div> element within < div> block.
   
   Syntax:

   

3. Adjacent Sibling Selector

   Adjacent Sibling Selector is used to selecting a specified element that appears right after the other specified element block.
   
   eg. select a < p> element which appears right after a < div> block.
   
   Syntax:

   

4. General Sibling Selector

   General Sibling Selector is used to select all the specified elements appearing after the other specified element block.
   
   eg. eg. select all < p> elements appearing after the < div> block.
   
   Syntax:

   

Pseudo Class

The Pseudo Class defines a special state of the element. When the particular state is achieved, CSS is applied.
Few of the most commonly used Pseudo Classes are:

Selector	Examples	Description
:link	a :link	Used for anchor tags, it selects all the unvisited links in the document and applies CSS.
:visited	a:visited	It'll select the link after it is visited once.
:hover	button:hover	Selects the the element when the user hovers the mouse on it.
:active	a:active	It selects the element after user clicks on it
:root	:root	The root element represents the html element. :root selects the root element.

Pseudo Element

The Pseudo Element selects a specific part of the content for styling.
The commonly used Pseudo elements are:

Selector	Examples	Description
::after	div::after	Applies the CSSright after the specified element
::before	div::before	Applies the CSS just before the specified element.
::first-letter	p::first-letter	Selects the first word of the content in the specified element.
::first-line	p::first-line	Selects the first line of the view of the content in the specified element.
::marker	::marker	Selects the markers of the list items.markers of the list items.
::selections	p::selection	Selects the portion selected by the user.

Attribute Selector

The Attribute Selector selects an HTML element having a specified attribute or an attribute value.
The commonly used Attribute Selectors are:

Selector	Examples	Description
[attribute]	[name]	Selects all elements having attribute 'name'
[attribute=value]	[name="std"]	Selects all elements having attribute 'name' with value "std"
[attribute~=value]	[name~="std"]	Selects the element who has attribute 'name' and contains the word 'std' in the attribute value.
[attribute|="value"]	[name|="btn"]	Selects all the elements having attribute as 'name' with values starting with the word 'btn'