Advanced Selectors and Functions

1. Advanced Combinators and Selectors

We previously covered basic selectors (Type, Class, ID) and grouping/chaining. These advanced selectors define relationships between elements beyond simple parent-child relationships.

A. Attribute Selectors

These selectors target elements based on the presence or value of an HTML attribute.

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

B. Combinators (Relationship Selectors)

Combinators define the relationship between two selectors:

/* Applies a large top margin only to paragraphs that immediately follow an H1 */
h1 + p {
  margin-top: 2rem;
}

C. The :not() Pseudo-Class

The negation pseudo-class selects elements that do not match the specified selector.

/* Selects all div elements EXCEPT those with the class="main" */
div:not(.main) {
  opacity: 0.8;
}

/* Selects all links that are NOT external (do not start with http) */
a:not([href^="http"]) {
  /* ... custom internal link style */
}

2. Advanced CSS Functions

Modern CSS introduced powerful functions that allow for highly flexible, responsive, and dynamic values that adapt to the viewport and content constraints.

A. The clamp() Function

The clamp() function pins a value between a minimum and a maximum size. It takes three arguments: min, preferred, and max.

clamp(min,preferred,max)

• If the preferred value is greater than max, the result is max.
• If the preferred value is less than min, the result is min.
• Otherwise, the result is preferred.

/* Example: Fluid Typography */
h1 {
  /* Min size: 2rem, Max size: 5rem, Preferred size: 5% of viewport width */
  font-size: clamp(2rem, 5vw, 5rem);
}
/* This ensures the H1 scales with the viewport (5vw) but never drops below 2rem (phone) or exceeds 5rem (desktop). */

B. The min() and max() Functions

These functions select the smallest or largest value from a comma-separated list of expressions.

/* The container will be 50% wide, UNLESS 50% is wider than 500px, in which case it caps at 500px. */
.container {
  width: min(50%, 500px); 
}