CSS Selectors: Targeting Elements in CSS
CSS selectors are patterns to select HTML elements on a web page for CSS rules. Selectors can target elements based on their tags, classes, IDs, and other characteristics.
How to Use CSS Selectors
Every CSS rule starts with a selector. To define CSS selectors, use the tag name, class, ID, attributes, or other characteristic of an element.
css
selector {
property: value;
}
CSS Type Selector
A CSS type selector targets HTML elements by their tag name.
css
p {
color: blue;
}
This example changes the text color of all paragraphs to blue.
CSS Class Selector
The CSS class selector targets elements with a specific class attribute. Classes are denoted by a period (.) followed by the class name and can be reused across multiple elements.
css
.example {
font-size: 20px;
}
This rule sets the font size of elements with the class example to 20 pixels.
CSS ID Selector
The ID selector in CSS targets a single HTML element with a specific ID. IDs are denoted by a hash (#) followed by the ID name and should be unique within a document.
css
#unique {
background-color: yellow;
}
This example applies a yellow background color to the element with the ID unique.
CSS Attribute Selector
CSS attribute selectors target elements based on attributes and their values. They are enclosed in square brackets ([]) and can include conditions.
css
a[href*="example"] {
text-decoration: none;
}
This rule removes the underline from all anchor (<a>) tags containing “example” in their href attribute.
CSS Descendant Selector
The CSS descendant selector targets elements that are descendants of a specified element. Use a space between selectors to indicate a descendant relationship.
css
div p {
margin: 10px;
}
This example sets a 10-pixel margin for all paragraphs inside a <div>.
CSS Sibling Selector
The adjacent sibling selector (+) targets the next sibling element immediately following the element before the +.
css
h1 + p {
border-top: 1px solid black;
}
This rule adds a top border to paragraphs that directly follow an <h1> element.
When to Use CSS Selectors
You need selectors whenever you want to apply styles to different elements on a web page.
Styling Based on Element Types
Use type selectors for global styles. For instance, you might want all headings to have the same font.
css
h2 {
font-family: Arial, sans-serif;
}
Applying Styles to Specific Classes
Class selectors are ideal for styling reusable components. Create modular styles you can apply to different parts of your application.
css
.button {
padding: 10px;
border-radius: 5px;
}
Targeting Unique Elements
ID selectors are perfect for elements that are unique within the document, like a navigation bar.
css
#navbar {
background-color: gray;
}
Examples of Using CSS Selectors
User Interface Customization
Web applications often use class selectors to customize user interfaces. Buttons, forms, and containers are commonly styled with classes.
css
.btn-primary {
background-color: blue;
color: white;
}
.form-input {
margin-bottom: 15px;
}
Conditional Styling Based on Attributes
Web browsers utilize attribute selectors to style elements conditionally, such as links that open in a new tab.
css
a[target="_blank"] {
color: red;
}
Hierarchical Styling
Content management systems often use descendant and sibling selectors to apply hierarchical styles. For example, they might apply specific styles to list items within a navigation menu.
css
.nav ul li {
display: inline-block;
margin-right: 20px;
}
Learn More About CSS Selectors
CSS Universal Selector
The universal selector * targets all elements within a document. This can be useful for applying global styles or resetting default margins and padding for consistency across browsers.
For example, you can create a rule to ensure zero margin and padding, and sizes include padding and borders.
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Combining Selectors
CSS allows combining multiple selectors for refined control. For instance, you can target elements with multiple classes.
css
.card.highlight {
border: 2px solid orange;
}
Pseudo-Classes and Pseudo-Elements
Pseudo-classes and pseudo-elements add advanced styling capabilities. They allow targeting specific states of elements or parts of elements.
css
a:hover {
color: green;
}
p::first-line {
font-weight: bold;
}
Advanced Sibling and Descendant Selectors
Explore sibling selectors beyond the adjacent sibling selector (+). For non-adjacent siblings, use the general sibling selector (~).
css
h2 ~ p {
color: gray;
}
Descendant selectors can also be combined with other selectors for more specificity.
css
ul.nav > li > a {
text-decoration: none;
}
Performance Considerations
While powerful, some selectors can impact rendering performance if overused, especially on large documents. Narrow your selectors to avoid broad, inefficient rules.
css
/* Avoid */
div p span {
color: red;
}
/* Better */
.content span.notification {
color: red;
}
Responsive Design
Responsive design techniques often rely on CSS selectors combined with media queries to target different screen sizes.
css
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
Looking to dive deeper into selectors and other essential CSS concepts? Check out our CSS course.