Selectors

CSS Selectors: Targeting HTML Elements

CSS Selectors are the fundamental way to select the HTML elements you want to style. They define which elements the CSS rules will apply to. Without selectors, your CSS would have no target!

Here's a breakdown of common CSS selectors:

1. Element Selectors (Type Selectors)

These selectors target all HTML elements of a specific type.

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

This CSS will apply the styles (blue color, 16px font size) to every <p> (paragraph) element on your page.

• Syntax: element_name
• Example: h1, div, span, a, img

2. ID Selectors

ID selectors target a single HTML element with a specific id attribute. IDs should be unique within a document.

<p id="intro">This is the introductory paragraph.</p>

#intro {
  font-weight: bold;
  text-align: center;
}

This CSS will only apply the styles (bold font, centered text) to the paragraph with id="intro".

• Syntax: #id_name
• Important: IDs are very specific. Use them when you need to style a single, unique element.

3. Class Selectors

Class selectors target all HTML elements with a specific class attribute. Multiple elements can share the same class.

<p class="highlight">This is important text.</p>
<div class="highlight">This section is also important.</div>

.highlight {
  background-color: yellow;
  padding: 5px;
}

This CSS will apply the styles (yellow background, 5px padding) to both the paragraph and the div with class="highlight".

• Syntax: .class_name
• Use Case: Classes are great for applying the same styles to multiple elements.

4. Universal Selector

The universal selector (*) selects all elements on the page. It's rarely used on its own, but can be useful for resetting styles.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Very common reset */
}

This CSS will remove the default margin and padding from all elements and set the box-sizing property.

• Syntax: *

5. Attribute Selectors

Attribute selectors target elements based on their attributes.

<a href="https://www.example.com">Example Link</a>
<input type="text" name="username">

a[href] {
  color: green; /* Styles all links with an href attribute */
}

input[type="text"] {
  border: 1px solid gray; /* Styles all text input fields */
}

• Syntax: element[attribute] or element[attribute="value"]
• Examples:
  • a[href] - Selects all <a> elements that have an href attribute.
  • a[href="https://www.example.com"] - Selects all <a> elements with href equal to "https://www.example.com".

6. Combinators (Relationships between Selectors)

Combinators define the relationship between selectors.

• Descendant Selector (space): Selects elements that are descendants of another element.

  div p {
    color: red; /* Selects all <p> elements inside a <div> */
  }
  

• Child Selector (>): Selects elements that are direct children of another element.

  div > p {
    color: red; /* Selects only <p> elements that are *directly* inside a <div> */
  }
  

• Adjacent Sibling Selector (+): Selects an element that is immediately preceded by another element.

  h2 + p {
    margin-top: 0; /* Removes the top margin from a <p> element that immediately follows an <h2> */
  }
  

• General Sibling Selector (~): Selects all sibling elements that follow another element.

  h2 ~ p {
    color: purple; /* Selects all <p> elements that follow an <h2>, even if they aren't immediately next to each other */
  }
  

7. Pseudo-classes

Pseudo-classes select elements based on their state or position. They start with a colon (:).

a:hover {
  color: orange; /* Changes link color on hover */
}

a:visited {
  color: purple; /* Changes link color after being visited */
}

p:first-child {
  font-weight: bold; /* Makes the first paragraph in a container bold */
}

• Common Pseudo-classes: :hover, :active, :visited, :focus, :first-child, :last-child, :nth-child(n)

8. Pseudo-elements

Pseudo-elements create elements that aren't actually in the HTML. They start with a double colon (::).

p::first-letter {
  font-size: 200%; /* Makes the first letter of each paragraph larger */
}

p::before {
  content: "→ "; /* Adds an arrow before each paragraph */
}

• Common Pseudo-elements: ::before, ::after, ::first-line, ::first-letter

Specificity:

When multiple CSS rules apply to the same element, the browser uses specificity to determine which rule takes precedence. Generally:

1. Inline styles (styles directly in the HTML element) have the highest specificity.
2. IDs are more specific than classes.
3. Classes are more specific than element selectors.
4. Universal selectors have the lowest specificity.

Understanding selectors is crucial for writing efficient and maintainable CSS. Experiment with these selectors to see how they affect your HTML elements!