CSS Selectors

1. What Are CSS Selectors?

CSS selectors are patterns used to select the elements you want to style. They can target elements based on their type, class, ID, attributes, and more.

2. Types of CSS Selectors

Element Selector

This selector targets HTML elements by their name. For example:

p {
    color: blue;
}

This will style all <p> elements with blue text.

Class Selector

Class selectors target elements with a specific class attribute. Use a dot (.) followed by the class name:

.my-class {
    font-size: 20px;
}

This will style all elements with the class my-class.

ID Selector

ID selectors target elements with a specific ID attribute. Use a hash (#) followed by the ID name:

#my-id {
    background-color: yellow;
}

This will style the element with the ID my-id.

Attribute Selector

Attribute selectors target elements based on their attributes. For example:

[type="text"] {
    border: 1px solid black;
}

This will style all input elements with the attribute type="text".

Pseudo-class Selector

Pseudo-classes are used to style elements based on their state or position. For example:

a:hover {
    color: red;
}

This will change the color of links to red when hovered over.

3. Combining Selectors

You can combine selectors to target specific elements. For example:

div.my-class {
    padding: 10px;
}

This will style all <div> elements that have the class my-class.

4. Specificity of Selectors

CSS selectors have different levels of specificity, which determines which styles are applied when there are conflicting rules:

• Inline styles (highest specificity)
• ID selectors
• Class selectors
• Element selectors (lowest specificity)

When multiple rules apply to an element, the rule with the highest specificity takes precedence.

5. Example of CSS Selectors

Here’s an example of various selectors in action:

Edit Copy

h1 {
    color: green;
}

.my-class {
    font-weight: bold;
}

#my-id {
    text-decoration: underline;
}

input[type="text"] {
    width: 100%;
}

a:hover {
    color: blue;
}

6. Conclusion

Understanding CSS selectors is crucial for effective styling. By using different types of selectors, you can create flexible and maintainable stylesheets that enhance your web design.