CSS: Selectors

Selectors in CSS are patterns used to select and style HTML elements based on various criteria. Selectors are crucial in CSS as they allow you to target specific elements or groups of elements on a web page and apply styling rules to them. Here are some common types of selectors in CSS:

• Element Selector (element): Targets all HTML elements of a specific type. For example, p selects all <p> paragraphs, h1 selects all <h1> headings, and so on.

p {
    color: blue;
    font-size: 16px;
}

• Class Selector (.class-name): Targets elements with a specific class attribute value. You can apply the same class to multiple elements and style them consistently.

.highlight {
    background-color: yellow;
    font-weight: bold;
}

• ID Selector (#id-name): Targets a single element with a specific ID attribute value. IDs should be unique within a page.

#header {
    font-size: 24px;
    color: red;
}

• Attribute Selector ([attribute=value]): Targets elements with a specific attribute and value. This can be useful for styling elements based on their attributes.

[type="button"] {
    background-color: green;
    color: white;
}

Pseudo-classes and Pseudo-elements: Pseudo-classes target elements based on their state or position within the document. Common pseudo-classes include :hover, :focus, :active, :nth-child(), etc. Pseudo-elements allow styling specific parts of an element, such as ::before and ::after.

a:hover {
    text-decoration: underline;
}

li::before {
    content: "• ";
}

• Combining Selectors: You can combine multiple selectors to create more specific targeting. For example, h1.highlight targets <h1> headings with the class "highlight," and div.container p targets <p> paragraphs inside <div> elements with the class “container.”

h1.highlight {
    color: blue;
}

div.container p {
    font-size: 14px;
}

Selectors play a crucial role in CSS as they allow you to apply styles precisely to the elements you want, making your web pages visually appealing and well-structured. Understanding different types of selectors and how to use them effectively is fundamental in CSS development.