CSS Selectors

List 10 and deminstrate 3 CSS3 selectors

  1. p:first-of-type

    2. Selects every p element that is the first p element of its parent

    Demonstrated: changed Background color

  2. :root

    3. Selects the document's root element

  3. element1~element2 p ~ ul (Deminstrated)

    4. Selects every ul element that are preceded by a p element

    The first paragraph.

  4. [attribute^=value] a[href^="https"] (deminstrated

    5. Selects every a element whose href attribute value begins with "https"

    This is a div with a class of "test".

  5. [attribute$=value] a[href$=".pdf"]

    6. Selects every a element whose href attribute value ends with ".pdf"

  6. :checked input:checked

    7. Selects every checked input element

  7. :disabled input:disabled

    8. Selects every disabled input element

  8. :empty p:empty

    9. Selects every p element that has no children (including text nodes)

  9. :enabled input:enabled

    10. Selects every enabled input element

  10. :not(selector) :not(p)

    11. Selects every element that is not a p element