Introduction to CSS Selectors

CSS selectors target HTML elements to apply styles, enabling precise control over a web page’s appearance. Selectors range from basic element tags to complex combinations, allowing developers to style specific parts of a page efficiently.

• Purpose: Identify which elements to style in a stylesheet.
• Role in CSS: Foundation for applying styles accurately.

Basic Selectors

Basic selectors target elements broadly or specifically:

• Element Selector: Targets all instances of an HTML tag (e.g., p for paragraphs).
• Class Selector: Targets elements with a specific class attribute, prefixed with a dot (e.g., .highlight).
• ID Selector: Targets a single element with a unique id, prefixed with a hash (e.g., #header).
• Universal Selector: Targets all elements with *.

Example: Basic selectors:

<style>
    p { color: blue; } /* Element */
    .highlight { background: yellow; } /* Class */
    #header { font-size: 24px; } /* ID */
    * { margin: 0; } /* Universal */
</style>
<p>Blue text</p>
<p class="highlight">Yellow background</p>
<h1 id="header">Large header</h1>

<style>
    p { color: blue; } /* Element */
    .highlight { background: yellow; } /* Class */
    #header { font-size: 24px; } /* ID */
    * { margin: 0; } /* Universal */
</style>
<p>Blue text</p>
<p class="highlight">Yellow background</p>
<h1 id="header">Large header</h1>

Combinators

Combinators define relationships between elements:

• Descendant Combinator (space): Targets elements nested within another (e.g., div p).
• Child Combinator (>): Targets direct children only (e.g., ul > li).
• Adjacent Sibling Combinator (+): Targets the next sibling (e.g., h2 + p).
• General Sibling Combinator (~): Targets all subsequent siblings (e.g., h2 ~ p).

Example: Combinators:

<style>
    div p { color: green; } /* Descendant */
    ul > li { list-style: none; } /* Child */
    h2 + p { margin-top: 0; } /* Adjacent Sibling */
    h2 ~ p { font-style: italic; } /* General Sibling */
</style>
<div>
    <p>Green text</p>
</div>
<ul>
    <li>No bullet</li>
</ul>
<h2>Title</h2>
<p>No top margin</p>
<p>Italic text</p>

<style>
    div p { color: green; } /* Descendant */
    ul > li { list-style: none; } /* Child */
    h2 + p { margin-top: 0; } /* Adjacent Sibling */
    h2 ~ p { font-style: italic; } /* General Sibling */
</style>
<div>
    <p>Green text</p>
</div>
<ul>
    <li>No bullet</li>
</ul>
<h2>Title</h2>
<p>No top margin</p>
<p>Italic text</p>

Attribute Selectors

Attribute selectors target elements based on their attributes or attribute values:

• [attr]: Targets elements with the attribute.
• [attr="value"]: Exact match.
• [attr*="value"]: Contains the value.
• [attr^="value"]: Starts with the value.
• [attr$="value"]: Ends with the value.

Example: Attribute selectors:

<style>
    [href] { color: purple; } /* Has href */
    [type="text"] { border: 1px solid; } /* Exact match */
    [class*="btn"] { padding: 5px; } /* Contains */
</style>
<a href="example.com">Purple link</a>
<input type="text">
<button class="btn-primary">Button</button>

<style>
    [href] { color: purple; } /* Has href */
    [type="text"] { border: 1px solid; } /* Exact match */
    [class*="btn"] { padding: 5px; } /* Contains */
</style>
<a href="example.com">Purple link</a>
<input type="text">
<button class="btn-primary">Button</button>

Pseudo-Classes and Pseudo-Elements

• Pseudo-Classes: Style elements based on state (e.g., :hover, :first-child, :focus).
• Pseudo-Elements: Style specific parts of an element (e.g., ::before, ::after).

Example: Pseudo-classes and pseudo-elements:

<style>
    a:hover { text-decoration: underline; } /* Pseudo-class */
    li:first-child { font-weight: bold; }
    p::before { content: "Note: "; } /* Pseudo-element */
</style>
<a href="#">Hover me</a>
<ul>
    <li>Bold item</li>
    <li>Normal item</li>
</ul>
<p>Text with prefix</p>

<style>
    a:hover { text-decoration: underline; } /* Pseudo-class */
    li:first-child { font-weight: bold; }
    p::before { content: "Note: "; } /* Pseudo-element */
</style>
<a href="#">Hover me</a>
<ul>
    <li>Bold item</li>
    <li>Normal item</li>
</ul>
<p>Text with prefix</p>

Specificity and Best Practices

• Specificity: Determines which styles apply when rules conflict (ID > Class > Element).
• Best Practices:
  • Use classes over IDs for reusability.
  • Keep selectors simple to avoid performance issues.
  • Avoid overusing the universal selector (*).
  • Use descriptive class names (e.g., .btn-primary).

Example: Specificity:

<style>
    p { color: blue; } /* Low specificity */
    .text { color: red; } /* Medium */
    #special { color: green; } /* High */
</style>
<p class="text" id="special">Green text</p>

<style>
    p { color: blue; } /* Low specificity */
    .text { color: red; } /* Medium */
    #special { color: green; } /* High */
</style>
<p class="text" id="special">Green text</p>