# CSS Selectors

# Basic selectors

At this point, we only know the basic CSS selectors

• The universal selector (*) which selects all elements on the page
• Simple selectors, based on (element) name, id and class

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    text-align: center;
    color: red;
}

h1, h2 {
    text-transform: uppercase;
}

#container {
    max-width: 600px;
    margin: auto;
}

.underline {
    text-decoration: underline;
}
 
        Copied!
    

# Combinator selectors

Combinator selectors allow you to select HTML elements based on their relationships with other elements in the document tree. They provide a powerful way to target specific elements without relying solely on class names or IDs.

The combinators we'll explore here are:

• Descendant Combinator (space )
• Child Combinator (>)
• Adjacent Sibling Combinator (+)
• General Sibling Combinator (~)

To understand combinators, let's visualize the relationships between HTML elements using the following diagram:

In this diagram:

• Ancestor: Any element that is a parent, grandparent, etc. of another element.
• Parent: An element that directly contains another element.
• Child: An element that is directly contained within another element.
• Sibling: Elements that share the same parent.
• Descendant: Any element that is a child, grandchild, etc. of another element.

Here's a more detailed example of how these combinators work:

# Attribute Selectors

Attribute selectors allow you to target HTML elements based on the presence or value of their attributes. This provides a more flexible way to select elements than simply relying on tag names, classes, or IDs.

/* Selects all elements with a "href" attribute */
[href] {
    color: blue;
}

/* Select all images surrounded by an anchor tag with an empty 'alt' attribute */
a img[alt=""] {
    border: 2px solid black;
}

/* Select all links with a 'href' attribute that STARTS WITH 'https://' */
a[href^="https://"] {
    color: green;
}

/* Selects all images with a 'src' attribute where the value ENDS WITH '.jpg' */
img[src$=".jpg"] {
    border: 3px solid red;
}

/* Selects elements with a 'class' attribute where the value CONTAINS the SUBSTRING 'col-'*/
/* Eg: class is 'col', 'col-1', 'col-ms-6', ... */
[class*="col-"] {
    padding: 10px;
    border-radius: 5px;
}

/* Select elements where the class attribute CONTAINS the WORD "highlight" */
/* Eg: class 'btn btn-danger' is selected but the class 'btn-danger' is not */
[class~="btn"] {
    background-color: yellow;
    font-weight: bold;
    padding: 5px;
}
 
        Copied!
    

For a comprehensive list and more detailed explanations of CSS attribute selectors, refer to the Mozilla Developer Network (MDN): CSS Attribute Selectors - MDN (opens new window)

# Pseudo-Class Selectors

Pseudo-class selectors are used to style elements based on their state, position within the document tree, or other dynamic characteristics. They allow you to target elements that cannot be selected using simple selectors alone.
Pseudo-classes are denoted by a colon : followed by the pseudo-class name.

# Pseudo-classes for user actions

# Pseudo-classes for element states

# Structural pseudo-classes

# Pseudo-Element Selectors

Pseudo-element selectors are used to style specific parts of an element. Unlike pseudo-classes, which target elements based on their state or position, pseudo-elements allow you to style portions of an element's content, like the first line, the first letter, or inserted content. Pseudo-elements are denoted by double colons :: followed by the pseudo-element name (although, single colons : are often used for legacy reasons but should be avoided for new code).

# Pseudo-Element Selector Details

# Advanced Selectors

These advanced selectors provide more flexibility and precision when selecting elements. They enable more complex logic in your CSS rules, making your stylesheets more efficient and maintainable.

The CSS selectors we discussed here are, are fully supported in modern browsers.

# Practice

Improve your CSS selector skills with fun and interactive exercises at CSS Diner (opens new window) or try the Frontend30 CSS selectors cheat sheet (opens new window)