CSS Selectors are used to select a particular HTML element based on their name, id, class, attribute, attribute value or state. There are 6 types of CSS Selectors.
Table of Contents
Types of CSS Selectors
It's not necessary that a selector would always be the name of the particular element. There are 5 main types of Selectors in CSS. Some of them are as follow.
- Simple Selectors
- Attribute Selectors
- Attribute Value Selectors
- Combinator Selectors
- Pseudo-class Selectors
- Pseudo-elements Selectors
Simple Selectors
Simple CSS Selectors are those selectors which select HTML Elements based on their name, id or class, irrespective of their state or relationship with other elements.
- Universal Selector
- Element Selector or Type Selector
- Id Selector
- Class Selector
- Attribute Selector
CSS Attribute Selectors
The CSS Attribute Selectors select or target HTML Elements based on their attribute or they only select html elements with a specified attribute.
Example of CSS Attribute Selector
The following example will only select anchor elements with title attribute.
a[title] {
color: red;
}
CSS Attribute Value Selectors
The CSS Attribute Value Selectors select HTML Elements with a specified attribute and value. There are 6 types of CSS Attribute Value Selectors.
Example of CSS Attribute Value Selectors
Square brackets are also used while using CSS Attribute Value Selectors.
The following example will only select anchor elements with target='_blank'.
a[target='_blank'] {
background-color: red;
}
Combinator Selectors
CSS Combinator defines the relationship between the selectors. A CSS Combinator can be used between two CSS Selectors. There are 4 types of CSS Combinators.
- Descendant Selector (space)
- Child Selector (>)
- Adjacent Sibling Selector (+)
- General Sibling Selector (~)
Pseudo-class Selectors
A Pseudo-Class Selector is used to define the specific state of element. There are 31 types of Pseudo-class Selectors.
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :hover
- :in-range
- :invalid
- :lang(language)
- :last-child
- :last-of-type
- :link
- :not(selector)
- :nth-child(n)
- :nth-last-child(n)
- :nth-last-of-type(n)
- :nth-of-type(n)
- :only-of-type
- :only-child
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
Pseudo-elements Selectors
A CSS Pseudo-element Selector is used to define style of specified parts of HTML element. There are five types of Pseudo-elements Selectors.
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
Grouping CSS Selectors
If we want to apply same style to different types of elements then we can also group them together. So that we won't have to write the same code again and again for different elements. Look at the example below.
p
{
font-weight:bold;
text-align: center;
color: blue;
}
h1
{
font-weight:bold;
text-align: center;
color: blue;
}
h4
{
font-weight:bold;
text-align: center;
color: blue;
}
Now instead of writing same CSS code for different elements, separately, we can group them to minimize our css code.
We will use comma to separate the selectors.
p, h1, h4
{
font-weight:bold;
text-align: center;
color: blue;
}
In the above example, all three elements, p, h1 and h4 will have same styling.
Post a Comment