CSS Testing Area

CSS Selectors, Etc.

Element Selectors ↓

• relational…
  • ul li descendant
  • ul>li direct descendant
  • li+li adjacent sibling
  • li~li non-adjacent sibling selector
• pseudo selectors
  • pseudo classes
    • anchors…
      • :link
      • :visited
      • :focus
      • :hover
      • :active
    • forms…
      • :checked
      • :disabled
      • :enabled
      • :in-range
      • :invalid
      • :optional
      • :out-of-range
      • :read-only
      • :read-write
      • :required
      • :valid
    • meta/generic…
      • :empty
      • :first-child
      • :first-of-type
      • :lang(x)
      • :last-child
      • :last-of-type
      • :not(selector)
      • :nth-child(x)¹
      • :nth-last-child(x)¹
      • :nth-last-of-type(x)¹
      • :nth-of-type(x)¹
      • :only-of-type
      • :only-child
      • :root
      • :target
  • pseudo elements…
    • ::first-letter
    • ::first-line
    • ::before
    • ::after
    • ::selection
• attribute…
  • [attr]
  • [attr="blah"] (exact)
  • [attr~="blah"] (space-separated)
  • [attr|="blah"] (hyphen-separated)
  • [attr^="blah"] (begins with…)
  • [attr$="blah"] (ends with…)
  • [attr*="blah"] (contains)

ordered list (<ol>) ↓

1. list item (ol li)
2. list item (ol li)
3. list item (ol li)
4. list item (ol li)
5. list item (ol li)
   1. list item (ol li ol li)
   2. list item (ol li ol li)
   3. list item (ol li ol li)
   4. list item (ol li ol li)
   5. list item (ol li ol li)

dictionary list (dl#blah) ↓

dictionary term (<dt>)

dictionary definition (<dd>)

dictionary term (<dt>)

dictionary definition (<dd>)

dictionary term (<dt>)

dictionary definition (<dd>)

dictionary term (<dt>)

dictionary definition (<dd>)

dictionary term (<dt>)

dictionary definition (<dd>)

paragraph <p>: #blah

paragraph <p>

#test
https://www.google.com/
http://www.google.com/

Footnotes

• ¹ These nth child pseudo classes can be used thus: :nth-child(3n), nth-last-child(odd), nth-of-type(5), :nth-last-of-type(3n+1), etc.