Hello everyone, welcome to my website. In this article, I'll show you 25+ CSS selectors every frontend developer should know. This article will help both: newcomers to learn about new CSS selectors, which can be useful in the future and for developers with solid experience to remind about some rarely used selectors, but which can come in handy in certain situations.
Lets deep into the world of CSS selectors, starting from more common, to more interesting.
CSS selector * for all elements
This selector is pretty common in the start of main CSS files. Usually, developers use it to set box-sizing property for every element on a page. In the case below, we will apply box-sizing and red color for every element on the page.
* {
box-sizing: border-box;
color: red;
}But you can use it in a more complex way. For instance, in the example below we will add color property for every element in element with box class.
.box * {
color: red;
}CSS element selector (selector by type)
One of really easy to understand and common selectors. This selector will apply some CSS properties to an element with the given tag. For example, we will remove underline for every link and add margin left for every unordered list.
a {
text-decoration: none;
}
ul {
margin-left: 20px;
}CSS class selector
Class selector is also really popular and easy to use. As you can already understand from its name, it will apply some CSS rules to the elements with given class attribute.
.box {
color: red;
}CSS ID selector
CSS ID selectors might come in handy in some situations, but also have some limitations. Always remember, that you can have only one element on a page with given ID attribute.
#box {
background: lime;
}CSS nesting selector
In CSS, you can combine different selectors to make for more specific selectors. For instance, we can apply styles for any link in element with class box.
.box a {
color: red;
}Or, like in the example below, we can apply styles by nesting 3 classes. Color will apply only for element with class example, that locates in element with class box, that locates in element with class wrapper.
.wrapper .box .example {
color: red;
}Also, we can make our selector more specific, combining tag and class. Code below will apply for links with link class.
a.link {
text-decoration: none;
}CSS selector of next element (plus selector) +
Moving to more interesting selector. Here you can see selector of next element. As you can already understand from its name, it selects next element after current. Let's take a look.
We have HTML structure like this:
<div class="wrapper">
<h1 class="title">CSS selectors are cool</h1>
<p class="paragraph">First</p>
<p class="paragraph">Second</p>
<p class="paragraph">Third</p>
</div>And let's imagine that our task is to apply some styles for the first paragraph, but without any new classes. We can achieve this with this code:
.title + .paragraph {
color: red;
}This will only work for the first paragraph. Basically, we just tell "Select first element with class paragraph after element with class title"
CSS selector for direct child >
This selector will select only elements, that are direct children of the element with the given selector. Let's take a look.
We have HTML structure like this:
<div class="box">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="box-2">
<div class="item">Item</div>
</div>
</box>Now, let's change color of "item" element, but only for the upper ones. We can achieve this with CSS selector for direct children.
.box > .item {
color: lime;
}In this case, lime color will apply only for first 2 "items".
CSS sibling selector (tilde) ~
CSS tilde selector very similar to + selector. This one will select all the elements from the same level of depth (or nesting).
<div class="box">
<h1 class="title">Title</h1>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="box">
<div class="item">Item</div>
</div>
</div>The code below will apply color property only for "items" on the same level as title is.
.title ~ .item {
color: lime;
}CSS attribute selector [attribute]
Also, we can select elements that have some attributes set. We can achieve this with square brackets.
<img src="..." alt="..." />
<img src="..." />In this case we will only select an image with alt attribute set.
[alt] {
width: 200px;
}Or we can do more specific things by combining different selector as always. Let's ensure, that we will select only images.
img[alt] {
width: 200;x
}CSS selector by attribute value [attribute="value"]
One more way to make previous selector more specific, is to set attribute value we are looking for.
<img src="lion.png" alt="Lion" />
<img src="penguin.png" alt="Penguin" />
<img src="cat.png" alt="Cat" />Let's select only image with penguin.
img[src="penguin.png"] {
width: 200px;
}CSS selector by part of attribute value [attribute*]
But what if we don't want to match whole attribute value? Well, for this case we can use next selector. Let's highlight links, that have "google" part in their URLs.
<a href="https://accounts.google.com">Google</a>
<a href="https://google.com">Google</a>
<a href="https://youtube.com">Youtube</a>In this case, only links that have "google" in their hrefs will be highlighted.
a[href*="google"] {
color: lime;
}CSS selector by attribute value start [attribute^]
Previous selector is great for the most tasks, but also, we can find attributes values, that start with specific text. For instance, let's make different highlighting for safe and unsafe links.
<a href="https://google.com">Google (safe)</a>
<a href="http://google.com">Google (unsafe)</a>The code below will mark safe (https, secured) links with lime color, and unsafe (plain http) with red color.
a[href^="https"] {
color: lime;
}
a[href^="http"] {
color: red;
}CSS selector by attribute end [attribute$]
Also, we have a opposite selector to previous one, This selector will allow us to select elements, that have some attribute value ending. Let's make all JPG images 300 pixels width.
<img src="cat.png" alt="cat" />
<img src="dog.jpg" alt="dog" />Let's select only image, that have src attribute ending with '.jpg'.
img[src$=".jpg"] {
width: 300px;
}CSS selector for checked inputs :checked
Now, let's talk about checkbox and radio inputs. There is a way of how to select only checked elements. To do this, we will be using :checked selector. This technique can be useful if you're creating custom input elements.
<input type="checkbox" name="example-1" />
<input type="checkbox" checked name="example-2" />
<input type="checkbox" name="example-3" />The selector below will select only the second input. Don't worry, it'd work even if user click on this element, checked attribute was added only for visual understanding.
input:checked {
// Do something with it
}CSS not selector :not(selector)
CSS not selector will help us to pick some elements, except other ones by condition. In the example below, we will change the color of all div elements, except those that have class "box".
div:not(.box) {
background: red;
}CSS selector based position of element :nth-child(n)
This selector will help us to find nth element in its parent.
Let's mark every second link in an element with "block" class.
.block a:nth-child(2) {
color: red;
}CSS selector based on position starting from the end :nth-last-child(n)
Also, we have similar selector, but starting from the end.
Let's mark every 3rd link in an element with "block" class, starting from the end.
.block a:nth-last-child(3) {
color: lime;
}CSS selector based on position of element with given type :nth-of-type(n)
This selector is similar to :nth-child, but it only counts elements of the same type. Let’s say we want to highlight the second link inside a block.
.block a:nth-of-type(2) {
color: red;
}Only the second <a> tag (not second child overall) will be selected.
CSS selector based on position of element with given type starting from end :nth-last-of-type(n)
Works just like the previous one but starts counting from the end. In the example below, we highlight the second link from the end.
.block a:nth-last-of-type(2) {
color: red;
}CSS selector for first child :first-child
This pseudo-class selects the first child element within a parent.
.block a:first-child {
color: red;
}Only the first link inside .block will be selected.
CSS selector for last child :last-child
This one does the opposite – selects the last child.
.block a:last-child {
color: red;
}CSS selector for only child of its parent :only-child
This selector targets an element if it is the only child of its parent.
.block p:only-child {
color: red;
}Will only apply if the paragraph is the only child inside .block.
CSS selector for elements if there is only one element of specific type in parent :only-of-type
This one selects an element if it’s the only one of its type within the parent. For example, the only <a> tag in a block:
.block a:only-of-type {
color: red;
}CSS selector for the first element of type :first-of-type
Selects the first element of a given type within its parent.
.block a:first-of-type {
color: red;
}Only the first <a> tag inside .block will be selected, even if it’s not the first child overall.
CSS pseudo-elements ::before and ::after
These are used to add decorative content before or after the element, without touching the HTML. For example, let’s add a red dot after .block:
.block {
position: relative;
}
.block::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
position: absolute;
transform: translateY(-50%);
}CSS selector for hover :hover
This one is very common and lets us apply styles on hover. For example:
.block:hover {
color: red;
}CSS selector for part of the text: ::first-line and ::first-letter
Sometimes you need to style only a portion of the element content.
p::first-line {
color: red;
}This will change only the first line of a paragraph.
p::first-letter {
color: red;
}This will change only the first letter of a paragraph.
That's all. Thanks for reading. Hope you found something useful and know more CSS selectors now.