Understanding How to Use CSS Selectors

CSS selectors are the means by which styles are applied to elements within an HTML document. They allow you to target specific elements to apply styles directly or in combination with other selectors.

Mandatory reading
To understand all the cases, see the CSS Selector reference

Types of CSS Selectors

Basic Selectors

Selector Type Description
Type selectors Target elements by their type (tag name). 
/* CSS */
h1 {
    color: red;
}
/* HTML */
<h1>Hello World</h1>
Class selectors Target elements by their class attribute. 
/* CSS */
.menu {
    background-color: blue;
}
/* HTML */
<div class="menu">Menu</div>
ID selectors Target a unique element by its ID attribute. 
/* CSS */
#header {
    font-size: 24px;
}
/* HTML */
<div id="header">Header Content</div>
Universal selectors Target all elements within the document. 
/* CSS */
* {
    margin: 0;
    padding: 0;
}
/* HTML */
<p>Paragraph text</p>
<div>Div content</div>

Combinator Selectors

Selector Type Description
Descendant selector (space) Selects all specified elements that are descendants of a particular element. 
/* CSS */
div p {
    color: green;
}
/* HTML */
<div>
    <p>Inside div</p>
</div>
Child selector (>) Selects all specified elements that are direct children of a specific element. 
/* CSS */
div > p {
    color: blue;
}
/* HTML */
<div>
    <p>Direct child of div</p>
    <span><p>Not targeted</p></span>
</div>
Adjacent sibling selector (+) Selects an element that is immediately preceded by a particular element. 
/* CSS */
h1 + p {
    color: red;
}
/* HTML */
<h1>Heading</h1>
<p>Adjacent paragraph</p>
General sibling selector (~) Selects all elements that are siblings of a specified element. 
/* CSS */
h1 ~ p {
    color: orange;
}
/* HTML */
<h1>Heading</h1>
<div><p>Not targeted</p></div>
<p>Another paragraph</p>

Attribute Selectors

Selector Type Description
Presence and value attribute selectors Select elements based on the presence or value of a specified attribute. 
/* CSS */
input[type="text"] {
    background-color: yellow;
}
/* HTML */
<input type="text" value="Text field">

Pseudo-classes and Pseudo-elements

Selector Type Description
Pseudo-classes Target elements in a specific state, e.g., :hover, :focus. 
/* CSS */
a:hover {
    color: red;
}
/* HTML */
<a href="#">Hover over me!</a>
Pseudo-elements Target specific parts of an element, e.g., ::first-line, ::before. 
/* CSS */
p::first-line {
    font-weight: bold;
}
p::before {
    content: "Note: ";
    font-weight: bold;
}
/* HTML */
<p>This is a paragraph with a styled first line and a pseudo-element before it.</p>

Conclusion

Understanding and utilizing CSS selectors effectively is essential for styling HTML documents. By mastering the different types of selectors and how they can be combined, developers can create more efficient and sophisticated styling for web pages. This knowledge allows for precise control over the visual presentation of web content, ensuring that each element on a webpage looks exactly as intended and enhances the overall user experience.