Different Types of CSS Selectors with examples
CSS Selectors find and select one or more HTML elements to which CSS rules will apply.
There are many different types of selectors available in the CSS stylesheet language.
Selectors available in CSS:
Element Selectors
The element selector selects HTML elements based on the element’s name, such as a table, article, h1, or span.?
Example -
h1 {
color: blue;
font-weight: bold;
}
ID Selectors
In HTML, the ID selector selects elements with a specific ID attribute.
Example -
#page_heading {
color: black;
font-size: 2.5rem;
}
Class Selectors
HTML Class selector selects elements with a specific class attribute.
Example -
.secondary_heading {
color: gray;
font-size: 1.5rem;
}
Group Selectors
Several selectors may be grouped into a comma-separated list when they share the same declarations.
Example -
h1, h2, h3 { font-family: sans-serif }
is equivalent to:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
Attribute Selectors
Attribute selectors select an element based on the presence of an attribute.
Example -
a[target] {
color: red;
font-style: italic;
}
a[target=”_blank”] {
color: red;
font-style: italic;
}
Pseudo-classes
A pseudo-class is used to define a special state such as hover, focus, and active of an element. A pseudo-class is expressed by adding a colon (:) after a selector in CSS.
Example -
a:hover {
color: blue;
}
The pseudo-class: hover can be used to select the anchor link when a user's pointer hovers over it and this selected anchor link can then be styled.
Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to style the first letter, or line, of an element. Insert content before, or after, the content of an element.
Example -
p::first-letter {
color: black;
font-size: 200%;
}
Combinators
CSS Combinators are characters or symbols that describe the relationship between two selectors.
4 types of CSS combinators:
Descendant Combinator
The Descendant Combinator selects elements that are descendants of specified elements, represented by a single space character.
Example -
article p {
color: gray;
}
Child Combinator
The Child Combinator selects all elements that are immediate children of a specified element, represented by a greater than symbol (>).
Example -
article p {
color: gray;
}
Adjacent sibling Combinator
The Adjacent Sibling Combinator selects an element immediately preceded by a specified element, represented by the plus sign (+).
Example -
h2 + p {
color: gray;
}
General sibling Combinator
The General Sibling Combinator selects all elements that are siblings of a specified element, represented by the tilde symbol (~).
Example -
h2 ~ p {
color: gray;
}
Universal Selectors
In CSS, Universal Selector is used to select all the elements on a webpage. It is denoted by an asterisk (*) symbol.
Example -
* {
line-height: normal;
letter-spacing: normal;
}
table * {
/* Select all elements inside table element */
padding: 10px;
}