In today's digital world, CSS (Cascading Style Sheets) is the key to creating visually appealing and functional websites. Beneath every well-crafted layout lie precise instructions that enable you to style specific elements on your page. CSS selectors allow you to target HTML elements based on their type, class, ID, or even specific states like hover and active.
In this blog post, we dive deep into the fascinating world of CSS selectors. Whether you’re new to web development or have years of experience, this guide offers a clear overview and practical examples—from basic element selectors to complex combinations and pseudo-classes. Discover how to control your website’s structure and enhance user experience using a variety of selectors, all demonstrated with sample HTML and CSS code.
Description:
Selects all instances of a specific HTML tag.
Example: All <p> elements.
HTML:
<!-- All <p> elements are selected -->
<p>This is a paragraph.</p>CSS:
p {
color: blue;
}
Description:
Targets elements based on their class attribute.
Example: An element with the class example.
HTML:
<!-- The element with the class "example" is highlighted -->
<div class="example">Example text</div>CSS:
.example {
background-color: yellow;
}
Description:
Targets a single element by its unique ID (IDs should be unique within the page).
Example: The element with the ID header.
HTML:
<!-- The element with the ID "header" is selected -->
<header id="header">My Website</header>CSS:
#header {
font-size: 24px;
}
Description:
Selects elements that are nested within a parent element, regardless of depth.
Example: A <p> element inside an element with the class container.
HTML:
<!-- The <p> tag inside the element with the class "container" is targeted -->
<div class="container">
<p>Paragraph inside container.</p>
</div>CSS:
.container p {
color: green;
}
Description:
Targets only the immediate (direct) children of a parent element.
Example: A <p> that is a direct child of .container.
HTML:
<div class="container">
<!-- This <p> is a direct child -->
<p>Direct child</p>
<div>
<!-- This <p> is not a direct child -->
<p>Not a direct child</p>
</div>
</div>CSS:
.container > p {
font-weight: bold;
}
Description:
Selects the element that immediately follows a specific element.
Example: The first <p> that directly follows an <h1>.
HTML:
<h1>Heading</h1>
<!-- This <p> immediately follows the <h1> -->
<p>First paragraph after heading</p>
<p>Second paragraph</p>CSS:
h1 + p {
margin-top: 0;
}
Description:
Selects all sibling elements that follow a specified element.
Example: All <p> elements that are siblings of an <h1>.
HTML:X
<h1>Heading</h1>
<!-- All following <p> elements that are siblings of the <h1> are selected -->
<p>First paragraph</p>
<p>Second paragraph</p>CSS:
h1 ~ p {
line-height: 1.5;
}
Description:
Targets elements based on the presence or value of an attribute.
Example: All <input> elements with type="text".
HTML:PPP
<!-- Only the <input> with type="text" is targeted -->
<input type="text" placeholder="Enter text here...">
<input type="password" placeholder="Password">CSS:
input[type="text"] {
border: 1px solid #000;
}
Description:
Applies styles when the user hovers the mouse over an element.
Example: A link changes color when hovered over.
HTML:
<!-- The link is highlighted on hover -->
<a href="#">Link</a>CSS:
a:hover {
color: red;
}
Description:
Applies styles while an element is being activated (e.g., clicked).
Example: A button shows a different background color when pressed.
HTML:
<!-- The button is styled while it is active (being clicked) -->
<button>Click me</button>CSS:
button:active {
background-color: #ccc;
}
Description:
Applies styles when an element receives focus, such as via clicking or tabbing.
Example: An <input> field is highlighted when focused.
HTML:
<!-- The <input> field is highlighted when it receives focus -->
<input type="text">CSS:
input:focus {
outline: 2px solid blue;
}
Description:
Allows you to select one or more children of a parent element based on their position.
Example: The second <li> in a list.
HTML:
<!-- The second <li> in the list is selected -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>CSS:
ul li:nth-child(2) {
font-weight: bold;
}
Description:
Insert content before or after an element’s content without altering the HTML.
Example: Display text before and after an element with the class box.
HTML:
<!-- The element with the class "box" is enhanced with extra content -->
<div class="box">Content</div>CSS:
.box::before {
content: "Start - ";
}
.box::after {
content: " - End";
}
Description:
Combines multiple selectors to assign the same styles to all of them.
Example: Apply the same margin to <h1>, <h2>, and <h3> elements.
HTML:
<!-- All headings (<h1>, <h2>, <h3>) are selected -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>CSS:
h1, h2, h3 {
margin-bottom: 10px;
}
Description:
Selects every element on the page, often used to apply global styles.
Example: Set a uniform box-sizing for all elements.
HTML:
<!-- Every HTML element on the page is targeted -->
<div>Div</div>
<p>Paragraph</p>
<span>Span</span>CSS:
* {
box-sizing: border-box;
}
Description:
Combines multiple selectors to create more specific rules.
Example: List items in a menu that change appearance on hover.
HTML:
<!-- List items within a menu that change on hover -->
<ul class="menu">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Contact</li>
</ul>CSS:
.menu .item:hover {
background-color: #f0f0f0;
}
Description:
Applies styles to links that have already been visited by the user.
Example: A link changes color after being clicked.
HTML:
<!-- The link changes appearance after it has been visited -->
<a href="https://example.com">Example</a>CSS:
a:visited {
color: purple;
}
Description:
Select the first or last child element within a parent.
Example: The first and last list items receive special styling.
HTML:
<ul>
<!-- First <li> element -->
<li>First Element</li>
<li>Second Element</li>
<!-- Last <li> element -->
<li>Third Element</li>
</ul>
CSS:
ul li:first-child {
font-style: italic;
}
ul li:last-child {
font-style: oblique;
}
Description:
Targets elements whose attribute values start with a specific string.
Example: All elements with a class name beginning with icon-.
HTML:
<!-- All elements whose class starts with "icon-" -->
<div class="icon-home"></div>
<div class="icon-user"></div>CSS:
[class^="icon-"] {
width: 24px;
height: 24px;
}
Description:
Applies styles to form elements that are checked, such as checkboxes or radio buttons.
Example: A label changes color when its associated checkbox is checked.
HTML:
<input type="checkbox" id="check1">
<label for="check1">Option</label>CSS:
input:checked + label {
color: green;
}
Description:
Applies styles to disabled form elements to visually indicate their state.
Example: A disabled input field appears with a different background.
HTML:
<!-- A disabled input field -->
<input type="text" disabled>CSS:
input:disabled {
background-color: #eee;
}
By understanding and using these CSS selectors, you can create finely-tuned and interactive web designs. This guide has shown you how to target elements precisely—whether by tag, class, ID, or state—to bring your web projects to the next level. Experiment with these selectors in your own projects and watch your websites transform with improved structure and dynamic effects.
UNHYDE is a Munich-based web development agency dedicated to pushing boundaries in web development, user experience, and digital marketing. Our mission is to create high-performing digital platforms that drive meaningful customer engagement and measurable business growth. We operate internationally and are a recognized Shopify Partner agency, having successfully launched countless websites and webstores worldwide.
For more insights or if you're ready to take your website to the next level, feel free to reach out to us at UNHYDE®, the web design agency. We’re always here to collaborate and craft tailored solutions that meet your unique needs.
get in touch
MAKE CONTACT