CSS Selectors Examples

1. Universal Selector (*)

This page uses `*` to apply box-sizing to all elements. 

* {
  box-sizing: border-box;
}

2. Type Selector

This paragraph is selected using type selector p.


.type-example p {
  color: blue;
}

3. Class Selector (.)

This paragraph is selected using class selector .class-example.


.class-example {
    color: green;
    font-weight: bold;
}

4. ID Selector (#)

This paragraph is selected using ID selector #id-example.


#id-example {
  color: red;
  font-style: italic;
}

5. Attribute Selector


input[type="text"] {
  border: 2px solid purple;
  padding: 5px;
}

6. Descendant Selector ( )

This paragraph is inside a div, styled with descendant selector.


.descendant div p {
    color: orange;
}

7. Child Selector (>)

This paragraph is a direct child and styled with > selector.

This one won't be styled (not a direct child).


.child > p {
  color: teal;
}

8. Adjacent Sibling Selector (+)

Heading

This paragraph comes right after h3 and is styled.


.adjacent h3 + p {
  color: brown;
}

9. General Sibling Selector (~)

Heading

This is a sibling after h4.

This one too!


.sibling h4 ~ p {
  color: darkmagenta;
}

10. Group Selector (,)

This h1 is styled with group selector.

This h2 also styled using group selector.


.group h1, .group h2 {
  color:  green;
}