11 CSS Selectors You Should Know
There’s more to CSS than .class and #id selectors. Get to know more useful CSS selectors with examples.
So CSS uses selectors to target and style specified elements or groups of elements in a an HTML document. We all know that, and often it’s enough to work with just a few basic selectors to accomplish results.
But… sometimes with a bit more than just basic CSS we can get better results. We can get the goal completed faster, and mostly just make it much simpler to maintain your CSS in the future.
So I've gathered a short list of selectors and selector-groups you can add to your arsenal. These include noob-level selectors as well as advanced ones. You might already know some, maybe most, maybe all. It never hurts to fresh up.
Feel free to suggest more useful selectors or methods in the comments below (with a fully formatted explanation) and I’ll add them to the list. Enjoy 📝
💡 Also, if you wish to reuse your CSS styling across multiple projects, you can do so using Bit.
Learn more:
1. Element selector
Ok before we move on to the more advanced interesting stuff, let’s quickly cover the basics. The elements selector lets you select and apply styling to all elements with the same specified element name.
It’s useful to apply styling to many elements of the same functionality without having to use a class for each. But, it might conflict with more specific rules.
Selecting all HTML paragraph elements looks like this:
p {
background-color: yellow;
}Note that you can group elements using the grouping selector which selects all elements with specified style definitions. So instead of this…
h1 {
text-align: center;
color: red;
}h2 {
text-align: center;
color: red;
}p {
text-align: center;
color: red;
}
You can do this.
h1, h2, p {
text-align: center;
color: red;
}2. #id selector
The id selector is another basic selector that lets you apply styling to all specified elements with a selected id. Naturally, this is a highly-specific selector that will overcome more general selectors. It uses # followed by the specified id to apply the styling rules to all elements with the matching id.
Selecting all elements with the id dog looks like this:
#dog {
background-color: purple;
}This simplicity is a double-edged sword and should not be used too much, as it can make it a nightmare to maintain your CSS later on. It’s therefore better to apply classes and more abstracted logic than to create many #id’s.
3. .class selector
The CSS class selector is probably the most commonly used selector. It applies styling to all elements with a specified class attribute. It’s a great way to customize how CSS rules apply by creating attributes that can be applied to any element to give it a certain styling. You can learn more here.
Selecting all li elements with the class roomy looks like this:
li.roomy {
margin: 2em;
}4. Attribute selectors
The CSS attribute selector lets you select all elements by the name or value of a given attribute. Chris Coyer gives this nice example where this HTML line has a rel attribute with the value of "friend" .
<h2 id="title" class="magic" rel="friend">David Walsh</h2>Using the CSS attribute selector you can select this line based on that value of the rel attribute. It looks like this:
h2[rel="friend"] {
color: purple;
}This is very useful for selecting elements like inputs that can have many different types, so using this selector you can select only “checkbox” elements for example. It looks like this.
input[type="checkbox"] {
color: purple;
}Or, you can use it to select all images based on a given source.
a[href="https://blog.bitsrc.io"] {
color: purple;
}One last important note is that you can play with the operators of the selector, so that for example ”*=” actually means “select if the following value appears anywhere inside the attribute value of the target element”. Read this A+ post.
5. Descendant selector
The descendant selector is the first of the CSS combination selectors family.
This family lets you mix simple selectors with a specified logic. The descendant selector is how you can apply styles to all elements that are descendants of a specified element.
Selecting all <h1> elements nested inside <div> elements looks like this.
div h1 {
background-color: purple;
}And, you can chain them. So to select all <a> elements inside <li> elements inside <ul> elements you can do this:
ul li a {
background-color: purple;
}And, you can mix it with .class selectors to select elements with a certain class that are inside other elements. This is really quite limitless.
li .class {
background-color: purple;
}6. Child selector (combinator)
The child selector is another member of the combination selectors family. It lets you select and apply styles to all elements that are children of a specified element. A great example for why this is useful would be nested elements.
For example, if you have a <ul> that has some items and inside these items, there are new <ol> of items, you might want to select a certain style just for the higher-hierarchy list items but not for the nested list’s items.
Selecting <h1> elements that are children of <div> elements looks like this.
div > h1 {
background-color: purple;
}7. Adjacent and general sibling selectors
These two selectors both let you select and style siblings of elements that have the same parent element. This can be useful for example when trying to control style hierarchies for elements throughout the docuemnt. The general sibling selector is pretty straight forward and it selects all elements that are siblings of a specified element.
div ~ p {
background-color: purple;
}The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Meaning, all elements that immediately follow the specified element. So, for example, you can select all <p> elements that are placed immediately after <div> elements:
div + p {
background-color: purple;
}8. Pseudo-classes
Pseudo-classes are basically just a fancy name for defining styles based on the state of specified elements. Yes, just like “hover” or “visited” or any other user-driven condition you know. This selector is therefore very useful to apply styles based on element states. The general syntax looks like this.
selector:pseudo-class {
property:value;
}For example, styles can change when a user hovers over an element.
div:hover {
background-color: blue;
}Or if a link was already clicked before.
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}This pseudo-class will only target a user interface element that has been checked — like a radio button, or checkbox. It’s as simple as that.
input[type=radio]:checked {
border: 1px solid purple;
}There are many more useful pseudo-classes like popping a tooltip on hover and more. You can check out an extended list with examples here.
There more advanced pseudo-classes such as Relational pseudo-class selectors and even Text-related pseudo-class selectors. To get from zero to hero I’d recommend this really great all-in-one post by Chris Coyier.
9. Pseudo-elements
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). Here’s the syntax.
selector::pseudo-element {
property:value;
}There are currently seven pseudo-elements in CSS. There are others, but they are still considered experimental technology.
For example ::first-line can be used to style the first line of every <p>.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}10. nth-of-type and nth-child
The nth-of-type selector lets you select every element that is a specified nth child of a specified type of it parent.
Sounds complicated? It’s really not. For example, the following CSS will select all <li> elements that are the 7th <li> child of their parent elements.
li:nth-of-type(7) {
color: purple;
}The :nth-child(n) selector matches all elements that are the nth child, regardless of type, of their parents. So, for example, the following CSS will select all the 2nd child elements of all <ul> elements — no matter what type.
ul:nth-child(2) {
color: purple;
}Of course, you can also chain them together like so.
div:nth-of-type(3) p:nth-of-child(2) {
color: purple;
}/* Note that this might not retuen the same result as:div:nth-of-type(3) p:nth-of-type(2) {
color: purple;
}/* Because in the first you select the 2nd child of any type in the 3rd div, while in the second you select the 2nd <p> in the 3rd div.
11. The star selector *
So every front-end developer knows this as a quick way to reset all browser default styles. Mostly, people think of it in this context.
* {
margin: 0;
padding: 0;
}Also see: “Using the CSS Star Selector to Zero Out Margins and Paddings”.
But actually, the * selector matches all elements in the DOM. In fact, you’re already using the star selector without knowing it. When you use other selectors like class or element, they already imply the star selector. So this:
ul {}The parser really sees this.
* ul {}And if you want to go all out, you can add that border and outline should also be at zero. It looks like this.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}But be warned that there are potential downsides to this technique, mainly around performance issues and missing useful default browser styles.
Tip: Why not have a reusable component library in the cloud?
When creating beautiful components in React, use Bit to extract and share components to the cloud. You can reuse components in all your different projects, sync changes, and share them with your team. Very useful.
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
