Chapter 2: Selectors and Specificity

• Basic Selectors
  • Universal (*), Type (h1), Class (.class), ID (#id)
• Group and Combinator Selectors
  • Grouping, descendant (div p), child (div > p), adjacent sibling (h1 + p)
• Attribute Selectors
  • Selecting elements by attribute ([type=”text”])
• Specificity and Cascade
  • How CSS applies rules, specificity hierarchy, and importance

Basic CSS Selectors Explained

CSS selectors are patterns used to select the elements you want to style. Here’s a detailed explanation of the basic selectors:

1. Universal Selector (*)

The universal selector (*) selects all elements on the page. It applies the specified styles to every single element, regardless of its type, class, or ID.

* {
  margin: 0;
  padding: 0;
}

In this example, all elements will have their margin and padding set to 0. This is often used in a CSS reset to ensure consistent spacing across different browsers.

When to Use:

• To apply a global style or reset styles across all elements.
• To set a consistent baseline for margins and padding across a page.

2. Type Selector

The type selector targets all elements of a specific type or tag name. For instance, h1, p, and div are type selectors that apply styles to all instances of those HTML elements.

h1 {
  color: darkblue;
  font-size: 24px;
}

p {
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

In this example:

• All <h1> elements will have dark blue text and a font size of 24 pixels.
• All <p> elements will have a line height of 1.5 and use the Arial font.

When to Use:

• To style specific types of elements uniformly.
• To define default styles for elements without using classes or IDs.

3. Class Selector (.class)

The class selector targets elements with a specific class attribute. Class selectors are defined with a dot (.) followed by the class name. Multiple elements can share the same class, allowing you to apply the same styles to different elements.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

In this example, any element with the class button will have a blue background, white text, 10 pixels of padding, and rounded corners.

HTML Usage:

<button class="button">Click Me</button>
<a href="#" class="button">Link Styled as Button</a>

When to Use:

• To apply styles to multiple elements that share common characteristics.
• To manage styles for groups of elements that should look the same.

4. ID Selector (#id)

The ID selector targets a specific element with a unique id attribute. IDs are defined with a hash (#) followed by the ID name. Each ID should be unique within a document, meaning it can only be applied to one element.

#header {
  background-color: gray;
  color: white;
  padding: 20px;
}

In this example, only the element with the ID header will have a gray background, white text, and 20 pixels of padding.

HTML Usage:

<div id="header">This is the header section</div>

When to Use:

• To apply styles to a single, unique element.
• When you need to override styles applied by class selectors or type selectors.
• To style specific components that only appear once on a page.

Combining Selectors

/* Type selector */
p {
  color: black;
}

/* Class selector */
.button {
  background-color: green;
}

/* ID selector */
#footer {
  text-align: center;
}

/* Combining type and class selector */
p.button {
  font-weight: bold;
}

You can combine selectors to target elements more precisely. For example:

In this example:

• All <p> elements will have black text.
• All elements with the class button will have a green background.
• The element with the ID footer will have centered text.
• All <p> elements with the class button will have bold text.

Group and Combinator Selectors in CSS

1. Grouping Selectors

Grouping selectors allow you to apply the same styles to multiple elements. This reduces code duplication and keeps CSS more manageable.

Syntax:
selector1, selector2, selector3 {
  property: value;
}
Example:
h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

In this example, all <h1>, <h2>, and <h3> elements will have navy text and use the Arial font.

2. Descendant Selector

The descendant selector targets elements that are nested within a specific parent element. It selects elements that are descendants of a specified element, regardless of their depth.

Syntax:
parent descendant {
  property: value;
}

Example:
div p {
  color: gray;
}

In this example, all <p> elements inside a <div> element will have gray text. It applies to any <p> that is inside a <div>, even if nested deeper.

3. Child Selector

The child selector targets elements that are direct children of a specified element. It only selects elements that are immediate children, not those that are nested further down.

Syntax:
parent > child {
  property: value;
}

Example:
ul > li {
  list-style-type: none;
}

In this example, only <li> elements that are direct children of <ul> will have no list-style type, not nested <li> elements within other <li> tags.

4. Adjacent Sibling Selector

The adjacent sibling selector targets an element that immediately follows another specified element. It only selects the first sibling that comes directly after the specified element.

Syntax:
previous + adjacent {
  property: value;
}

Example:
h1 + p {
  margin-top: 0;
}

In this example, only the first <p> immediately following an <h1> will have no top margin.

Attribute Selectors in CSS

Attribute selectors allow you to style elements based on their attributes and values.

Basic Syntax:
   [attribute="value"] {
     property: value;
   }
Examples:
   Exact Match:
     [type="text"] {
        border: 1px solid #ccc;
     }
Targets elements with type="text", like <input type="text">.
Partial Match:
    Starts With:
     [href^="https"] {
        color: green;
     }
Targets images (<img>) with a src ending in ".jpg".
Contains:
    [class*="button"] {
     padding: 10px;
    }
Targets elements with class containing "button".

Summary

• Exact Match: [attribute="value"] — Selects elements with a specific attribute value.
• Starts With: [attribute^="value"] — Selects elements with attributes starting with a given value.
• Ends With: [attribute$="value"] — Selects elements with attributes ending in a given value.
• Contains: [attribute*="value"] — Selects elements with attributes containing a given value.

Specificity and Cascade in CSS

1. Specificity

Specificity determines which CSS rule is applied when multiple rules target the same element. It is calculated based on the types of selectors used in a rule.

Specificity Hierarchy:

• Inline Styles: Highest specificity (e.g., <p style="color: red;">).
• IDs: High specificity (e.g., #header).
• Classes, Attributes, Pseudo-classes: Moderate specificity (e.g., .button, [type="text"], :hover).
• Elements and Pseudo-elements: Lowest specificity (e.g., p, ::before).

Calculation: Specificity is calculated as a four-part value: (a, b, c, d) where:

• a = Number of inline styles.
• b = Number of IDs.
• c = Number of classes, attributes, and pseudo-classes.
• d = Number of elements and pseudo-elements.

Example:
#header { color: blue; } /* Specificity: (0, 1, 0, 0) */
.button { color: green; } /* Specificity: (0, 0, 1, 0) */
p { color: red; } /* Specificity: (0, 0, 0, 1) */

If <p> has both .button and #header applied, #header will take precedence due to higher specificity.

2. Cascade

Cascade refers to the order in which CSS rules are applied. It determines which rules override others based on their source order.

Cascade Order:

1. Importance: Rules with !important override other rules.
2. Specificity: More specific selectors override less specific ones.
3. Source Order: Later rules override earlier rules if specificity is equal.

Example:
p { color: red; }
p { color: blue; }

The second rule (color: blue;) will apply because it comes after the first one.

Conclusion

These selectors help you manage complex layouts and styles by allowing precise control over which elements are styled and how they relate to one another. Specificity determines which rule applies based on selector types. Higher specificity wins.

Chapter 3: CSS Colors and Backgrounds