CSS Selector Demo

this is an h2 header

This paragraph has ID par1

this is another h2 header

this paragraph precedes the list of fruits and veggies

1. apple
2. broccoli
3. coconut. this is tough
4. date
5. endive
6. fennel. this is yucky
7. "g" fruits
   • gooseberry
   • grape
   • grapefruit
   • guava
8. horseradish
9. tomato

this paragraph follows the list of fruits and veggies

Tag Selectors

h2 p ul li ol

Class Selectors

.fruit .veg

ID Selectors

#par1 #list1

Attribute Selectors

[data-tag] [data-tag=tough] [data-tag=yucky]

Structural Selectors

ol li ol > li h2 + p ul li ul > li li + li .veg + .veg .fruit + .veg .veg + .fruit li + .veg [data-tag=tough] + li [data-tag=tough] ~ li #par1 + h2 #par1 + p #par1 ~ p #par1 ~ li