CSS selectors are patterns used to select and style HTML elements. They can be as simple as selecting a specific element or as complex as targeting elements based on multiple conditions. Here’s an overview with examples:

1. Basic Selectors

• Universal Selector (*): Selects all elements on the page. * { color: red; } This will make the text color of all elements red.
• Type Selector (Element Selector): Selects elements of a specific type (tag). p { font-size: 16px; } This will set the font size of all <p> (paragraph) elements to 16px.
• Class Selector (.): Selects elements with a specific class. .highlight { background-color: yellow; } This will apply a yellow background to any element with the class highlight.
• ID Selector (#): Selects an element with a specific id. #header { font-weight: bold; } This will apply bold text styling to the element with the id="header".

2. Combinator Selectors

• Descendant Selector (space): Selects elements that are nested within a specific parent element. .container p { color: blue; } This will apply blue text color to all <p> elements inside an element with the class container.
• Child Selector (>): Selects direct child elements. .parent > .child { color: green; } This will apply green text color to all elements with the class child that are direct children of an element with the class parent.
• Adjacent Sibling Selector (+): Selects the element that is immediately next to a specific element. h1 + p { margin-top: 0; } This will remove the margin-top of the first <p> that immediately follows an <h1>.
• General Sibling Selector (~): Selects all siblings of a specific element. h1 ~ p { color: purple; } This will apply purple text color to all <p> elements that are siblings of an <h1>.

3. Attribute Selectors

• [attribute]: Selects elements with a specific attribute (any value). a[href] { text-decoration: underline; } This will underline all <a> (anchor) elements that have an href attribute.
• [attribute=”value”]: Selects elements with a specific attribute and value. input[type="text"] { border: 1px solid #ccc; } This will apply a border to all <input> elements with type="text".
• [attribute^=”value”]: Selects elements whose attribute value starts with a specified value. a[href^="https"] { color: green; } This will color all links that begin with https.
• [attribute$=”value”]: Selects elements whose attribute value ends with a specified value. img[src$=".jpg"] { border-radius: 8px; } This will apply a border radius to images with .jpg in their src attribute.
• *[attribute=”value”]**: Selects elements whose attribute value contains a specified value. div[class*="button"] { padding: 10px; } This will apply padding to all <div> elements whose class contains button.

4. Pseudo-classes

• :hover: Selects an element when the user hovers over it. a:hover { color: red; } This will change the color of links to red when the user hovers over them.
• :first-child: Selects the first child of a parent element. ul li:first-child { font-weight: bold; } This will make the first list item (<li>) inside a <ul> bold.
• :last-child: Selects the last child of a parent element. ul li:last-child { color: green; } This will make the last list item (<li>) inside a <ul> green.
• :nth-child(n): Selects the nth child of a parent element. li:nth-child(odd) { background-color: lightgray; } This will apply a light gray background color to odd-numbered list items.
• :not(): Selects elements that do not match a given selector. p:not(.highlight) { color: gray; } This will apply gray text color to all <p> elements that do not have the class highlight.

5. Pseudo-elements

• ::before: Inserts content before an element. p::before { content: "Note: "; font-weight: bold; } This will add the text “Note: ” before every paragraph.
• ::after: Inserts content after an element. p::after { content: " (end)"; font-style: italic; } This will add the text “(end)” after every paragraph.

6. Grouping Selectors

To apply the same styles to multiple elements, you can group them together using commas.

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

This will apply the Arial font to all <h1>, <h2>, and <h3> elements.

---