One of the complicated parts of CSS declarations is coming with proper selectors we want to apply the style for. Understanding how these selectors work is a great first step in designing a professional looking website. There are multiple ways to select an element for applying styles in CSS.
Different types of Selectors
Below are some of the most common types of CSS Selectors.
Universal Selectors
Styles applied using universal selectors are applied to all elements on the HTML page. Applying styles this way is considered inefficient as browsers have to parse all elements in the HTML document to apply the style for.
* {
color: red;
}
Element Selectors
HTML elements can be styled using their tag names. With the below CSS, all <h2> tags would be rendered in red color.
h2 {
color: red;
}
Class Selectors
They are useful if similar styles need to be applied to different parts of the application. Class selectors are defined using . followed by the class name like shown below:
.a-class {
color: red;
}
ID Selectors
Id attribute in HTML is used to uniquely identify an HTML element. These ids could also be used to style an element using # followed by the id.
#my-id {
color: red;
}
Attribute Selectors
HTML elements could be styled based on the presence of an attribute using the Attribute selector. For example below declaration would add border to any element with disabled attribute.
[disabled] {
border: 2px solid black;
}
Group Selectors
If more than one class or element share the same styles they could be comma separated and defined with a single declaration to avoid duplication.
#my-id,
.b-class {
color: red;
}
Compound Selectors
If we want to style only a specific element containing a named class, we could use a compund selector. With the below style declaration, only div elements with class a-class would be styled. Below style will not be applied if an <h1> element happens to have the same a-class.
div.a-class {
color: red;
}
Descendant Selectors
All elements that are nested inside a given element are called descendants. For example, with the below selector we can style all paragraph elements that are nested in the <body> tag.
body p {
color: red;
}
Parent Child Selectors
Parent Child selector is a little more specific than the descendant selector. It only styles the elements that are direct children of the selector defined on the left side. Below declaration applies only to anchor tags that are immediate children of paragraph tag. If <a> tag happens to be nested inside another <span> tag it will not receive the style.
p > a {
color: blue;
}
General Sibling Selectors
General sibling selectors help style all siblings that are defined after the given selection. With the below selector one can style all paragraph elements that are defined after the <div> and are siblings of the <div> element.
div ~ p {
color: red;
}
Adjacent Sibling Selectors
Adjacent sibling selector styling is similar to the general sibling selector except style will be applied to only the sibling that comes right after the selector.
div + p {
color: red;
}
Pseudo Class Selectors
Pseudo class selectors help in styling a given state of an element. Below styles get applied when a user hovers over an anchor tag.
a:hover {
color: red;
text-decoration: none;
}
Pseudo Element Selectors
It help style part of an element. Pseudo elements styling is declared using :: in CSS3. Below selector styles all paragraph elements’ first line.
p::first-line {
color: red;
}
