CSS Selectors

Selectors target which HTML elements a CSS rule applies to.

Basic Selectors

Selector	Targets	Example
Element	All of that tag	`p { }`
Class	Elements with that class	`.card { }`
ID	One element with that id	`#hero { }`
Universal	Every element	`* { }`

Combinators

Combinator	Meaning	Example
Space	Descendant	`nav a`
>	Direct child	`ul > li`
+	Adjacent sibling	`h2 + p`
~	General sibling	`h2 ~ p`

Example

/* Element selector */
p { color: gray; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#header { font-size: 32px; }

/* Descendant: all <a> inside <nav> */
nav a { color: white; }

/* Child: direct <li> children of <ul> */
ul > li { list-style: none; }

/* Group: apply same style to multiple */
h1, h2, h3 { font-family: Georgia, serif; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned