Premium CSS Course

CSS Selectors

CSS selectors are patterns used to select and target HTML elements that you want to style. Understanding how to use different selectors allows you to apply styles precisely to the right elements on a page.

What Are CSS Selectors?

CSS selectors are used to target specific HTML elements on the page so that you can apply styles to them. Selectors can target elements by their type (e.g., <h1>, <p>), class, ID, or attributes.

Types of CSS Selectors

There are various types of CSS selectors, and each serves a different purpose for targeting elements:

• Universal Selector (*): This selector targets all elements on the page.

            * {
                color: blue;
            }
        

This will apply blue text color to all elements on the page.

• Type Selector: Targets all elements of a specific type (tag name).

            p {
                font-size: 16px;
            }
        

This will apply a font size of 16px to all <p> elements.

• Class Selector (.): Targets elements with a specific class attribute. Prefixed with a dot (.).

            .my-class {
                color: green;
            }
        

Any element with the class my-class will have green text.

• ID Selector (#): Targets an element with a specific ID attribute. Prefixed with a hash (#).

            #header {
                background-color: #4CAF50;
            }
        

This will apply a green background color to the element with the ID header.

• Attribute Selector: Targets elements with a specific attribute or attribute value.

            input[type="text"] {
                border: 1px solid #ccc;
            }
        

This targets all <input> elements with the type="text" attribute and applies a border.

• Descendant Selector ( ): Selects elements that are inside a specific parent element.

            div p {
                color: purple;
            }
        

This will style all <p> elements inside a <div> element, setting their color to purple.

• Child Selector (>): Targets direct child elements of a specific element.

            div > p {
                font-size: 18px;
            }
        

This will style all <p> elements that are direct children of a <div> element.

• Adjacent Sibling Selector (+): Targets an element that is directly adjacent to another element.

            h1 + p {
                margin-top: 20px;
            }
        

This will add a top margin of 20px to the <p> element that directly follows any <h1> element.

• General Sibling Selector (~): Targets all sibling elements that follow a specified element.

            h1 ~ p {
                color: blue;
            }
        

This will apply a blue text color to all <p> elements that are siblings of any <h1> element.

Grouping Selectors

You can group multiple selectors to apply the same style to different elements. This is done by separating the selectors with commas.

        h1, h2, h3 {
            font-family: Arial, sans-serif;
        }
    

This applies the same font-family to <h1>, <h2>, and <h3> elements.

Combining Selectors

Selectors can be combined to target specific elements in more complex ways. For example, you can combine a class and a type selector to target specific elements with a certain class:

        .my-class p {
            color: orange;
        }
    

This will style all <p> elements with the class my-class and set their color to orange.

CSS Pseudo-Classes

CSS pseudo-classes allow you to apply styles to elements based on their state or position. Some common pseudo-classes include:

• :hover: Applies a style when an element is hovered over with the mouse.

            a:hover {
                color: red;
            }
        

• :first-child: Targets the first child element of a parent.

            ul li:first-child {
                font-weight: bold;
            }
        

• :last-child: Targets the last child element of a parent.

            ul li:last-child {
                font-style: italic;
            }
        

Best Practices for Using Selectors

• Use specific selectors: Use the most specific selector to target the elements you need to avoid unintended styling.
• Avoid overuse of universal selector: While * applies styles to all elements, it's often better to use more specific selectors to improve performance and maintainability.
• Keep your selectors organized: Structure your CSS selectors logically to ensure code readability and maintainability.
• Test responsiveness: Ensure that your selectors work across different screen sizes and devices.