CSS Selectors Demo

* (Universal Selector)

Every element is affected by the universal selector.

Type Selector (e.g., `p`, `h1`)

This paragraph is styled with a type selector for ( p ) elements.

.highlight (Class Selector)

This element is styled with a class selector.

#unique (ID Selector)

This element is styled with an ID selector.

[data-type="special"] (Attribute Selector)

This element is styled with an attribute selector.

.container p (Descendant Selector)

This paragraph is a descendant of `.container`.

This paragraph is a descendant of `.container`.

.parent > .child (Child Selector)

This element is styled with a child selector.
This element is styled with a child selector.

h3 + p (Adjacent Sibling Selector)

This is a heading.

This paragraph is directly after an ( h3 ) and is styled with an adjacent sibling selector.

h4 ~ p (General Sibling Selector)

This is another heading.

This paragraph is a sibling of an ( h4 ) and is styled with a general sibling selector.

This one too!