2.css-selectors.md

Quiz

...

Explorer

CSS

4 lessons

css4

CSS Fundamentals CSS Selectors CSS Box Model CSS Flexbox

~//tutorials/en/css/css-selectors/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Loading...

en/tutorials/css/2css-selectors

# CSS Selectors

Selectors tell CSS *which elements* to style. Picking the right one keeps your stylesheets small and predictable.

## Basic selectors

```css
h1 { color: #00ff41; }        /* element */
.card { border: 1px solid; }  /* class — reuse anywhere */
#hero { padding: 2rem; }      /* id — unique, use sparingly */
```

## Combinators

Combinators describe relationships between elements.

```css
nav a { color: inherit; }          /* descendant: a inside nav */
ul > li { margin-left: 0; }       /* child: direct li of ul */
h2 + p { margin-top: 0.5rem; }    /* adjacent sibling: p right after h2 */
section p { line-height: 1.6; }   /* any descendant */
```

## Pseudo-classes

Pseudo-classes select elements in a *state* or *position*.

```css
a:hover { color: #00cc34; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid; }
```

## Specificity

When rules conflict, specificity decides the winner. Roughly: **id > class > element**. A more specific rule beats a less specific one, regardless of order.

```css
.card { color: red; }      /* 1 class */
div.card { color: blue; }  /* 1 element + 1 class — wins */
```

~ hackweb.dev