WHAT ARE SELECTORS IN CSS?
A selector in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
WHAT ARE THE DIFFERENT TYPES OF SELECTORS IN CSS?
In css there are several different types of selectors , few of which will be covered here!
THE UNIVERSAL SELECTOR :
The (*) is an universal selector which sets a value for all the elements in the HTML document. It is very useful when you wish to apply a value to all the elements on the page.
Syntax :
* { property: value}
Example:
This will apply background color and color to all the elements of the document.
THE TYPE SELECTOR (aka Element Selector)
Syntax :elementtype{ style properties}
The type selector which is also sometimes referred to as the element selector .The job of this selector is to match all the HTML elements that have the same name.
Example:
This will align the text to center , apply font and color to all the elements of p.
THE ID SELECTOR :
Syntax :#idname { style properties }
This selector matches every HTML element having an ID attribute with the value the same as that of the selector, without the hash sign. This selector is used with a hash character (#) followed by the id attribute value we wish to match. The id selector will always match only one element in our document.
Example:
This will apply a black background color and a pink text color, and a padding of 50px to the table that matches the id "theme".
THE CLASS SELECTOR :
Syntax : .classname { style properties }
This selector is used to match the HTML elements that have the specified class. It is written starting with a period(.) character followed by the class attribute value we are looking for.
HTML:
CSS:
This applies different style rules to the different elements ,depending on weather its a heading or a paragraph.
THE GROUPING SELECTOR :
Syntax : element1,..,...,elementn {style properties}
The group selector is used to select all the elements with the same style definition. Multiple elements can be grouped by simply separating them using commas(,).
HTML:
CSS:
This will apply font size of 50px and color to all h2 , h4 and ul elements.
THE COMBINATORS :
The CSS Selectors can also be combined together with the help of combinators . These combinators are used to define relationship between different selectors .These help you select items based on their positions in the document.
THE DESCENDENT COMBINATOR :
Syntax : element1 element 2 {style properties}
HTML:
CSS:
This applies a border of 2px , color and font size of 30px to all the a elements which are descendant of desc element, regardless of how nested they are.
THE CHILD COMBINATOR :
Syntax :element1 > element 2 {style properties}
This selector is used to match an element that is immediate child of another element. A prompt(>) character to represent the child character.
HTML:
CSS:
This will apply font size of 20px and color black to every h2 element that is a direct child of any element that has the class parent so.
THE GENERAL SIBLING COMBINATOR :
Syntax :element 1 ~ element 2 {style properties}
This selector selects the element that share same parents , i.e elements which are siblings to each other. The tilde(~) character is used to represent the general sibling selector.
HTML:
CSS:
This will apply a font size of 20px and color to every p element which is a sibling of any img element and comes after it.
THE ADJACENT SIBLING COMBINATOR :
Syntax : element 1 + element 2{style properties}
The adjacent sibling combinator is essentially used match an element that is immediately after another element, but not a child of it.
Example:
Here, only the first p the element will be selected since the second one doesn't appear immediately after the h2 element.
THE PSEUDO SELECTORS :
A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. It is represented by a colon character(:).
Pseudo class selectors
Syntax : selector:pseudo-class { property: value; } Some of the most common pseudo class selectors are given below!
:hover
Syntax :
selector :hover{ property: value; }
:hover works when the user moves their cursor over an element but does not select it.
Example :
- :focus
Syntax: selector :focus{ property: value; }
The :focus selects an element that is being focused on by the user. This pseudo-class is used to select an element which is currently focused by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it.
Example :
- :Active
Syntax : selector :active{ property: value; }
We use the :active selector to select and style active links. This pseudo-class is used to select an element which is activated when the user clicks on it.
Example:
- Pseudo element Selector :
Syntax : selector::pseudo-element { property: value; }
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements. The double-colon (::) represents pseudo-element selectors.
Take a look at some of the pseudo-element selectors given below!
::before
Syntax :
selector::before { property: value; }The ::before pseudo-element adds content before the HTML element .It is inline by default.
Example:
::after
Syntax :
selector::first-line { property: value; }The ::after pseudo-element adds content after the HTML element. It is inline by default.
Example:
When using the ::after and ::before pseudo-elements we must use the content property to make your styles visible.
- ::first-letter
Syntax :
selector::first-letter { property: value; }
Example:
- ::first-line
Syntax :
selector::first-line { property: value; }
Example:
Remember , that both the ::first-line and the ::first-letter pseudo-element work only for block elements.
~~That's all for this one! Thanks for visiting! Hope you got something from it! ~~
Sources: