03_pseudo_classes_and_pseudo_elements

dz / mdn / css / 1_css_building_blocks / 03_pseudo_classes_and_pseudo_elements

Summary

Pseudo Classes and Pseudo-Elements

Node Tree

• pseudo_class
  • user_action_pseudo_class
    • apply_when_user_interacts_doc
    • class_hover
    • dynamic_pseudo_class
  • selects_elem_particular_state
  • can_be_combined
  • class_first_child
  • class_focus
  • class_hover
  • class_invalid
  • class_last_child
• pseudo_element
  • whole_new_element
  • starts_with_double_colon
  • can_be_combined
  • content_property
    • element_after
    • element_before
  • element_first_line

Nodes

pseudo_class
content	Pseudo class
children	user_action_pseudo_class, selects_elem_particular_state (description), can_be_combined (can be combined with pseudo-elements), class_first_child, class_focus, class_hover, class_invalid, class_last_child

selects_elem_particular_state
content	Selector that selects elements in a particular state
parents	pseudo_class

pseudo_element
content	pseudo-element
children	whole_new_element (description), starts_with_double_colon (notation), can_be_combined (can be combined with pseudo-classes), content_property, element_first_line

whole_new_element
content	Acts as if you added a whole new element to the HTML markup
parents	pseudo_element

class_hover
content	:hover
parents	pseudo_class, user_action_pseudo_class

class_first_child
content	:first-child
parents	pseudo_class

class_last_child
content	:last-child
parents	pseudo_class

class_invalid
content	:invalid
parents	pseudo_class

class_focus
content	:focus
parents	pseudo_class

user_action_pseudo_class
content	User action pseudo class
children	apply_when_user_interacts_doc, class_hover, dynamic_pseudo_class (AKA)
parents	pseudo_class

dynamic_pseudo_class
content	Dynamic Pseudo Class
parents	user_action_pseudo_class

apply_when_user_interacts_doc
content	applied when user interacts with the document
parents	user_action_pseudo_class

can_be_combined
content	Can be combined
parents	pseudo_class, pseudo_element

starts_with_double_colon
content	starts with "::"
parents	pseudo_element

element_first_line
content	::first-line
parents	pseudo_element

content_property
content	Content Property
children	element_after (used with), element_before (used with)
parents	pseudo_element

element_before
content	::before
parents	content_property

element_after
content	::after
parents	content_property