Photo by Nick Karvounis on Unsplash
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. This article attempts to list some of the common selectors with an explanation.
What are Selectors?
Selectors identify elements getting styled in a CSS declaration. In a CSS declaration, selectors are the initial portion that come before curly braces. For example, section HTML element is the selector in the below declaration.
section {
font-size: 1rem;
padding: 0.5rem;
margin: 0.5rem;
}
What is a DOM?
Before getting into details on common types of CSS Selectors, one must understand how the browsers interpret the HTML page. Browsers try to interpret the contents of the HTML page by parsing them into a DOM. DOM stands for Document Object Model. Quick explanation of DOM can be found here.
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
Class selectors 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
Pseudo element selectors 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;
}
Final Thoughts
Getting comfortable with CSS selectors would help in coming up with precise CSS declaration that aims to style desired parts of the web page in a professional way. This would also help in avoiding making a lot of costly styling mistakes.
Top comments (1)
We always seem to be looking this ol list up: code.tutsplus.com/tutorials/the-30... . Your list is nice though! As far as tricky selectors: we mostly use
nth-of-type(...)andh2 + p/ and also a lot of this combo:not(:first-of-type