mdn/css/1_css_building_blocks/03_pseudo_classes_and_pseudo_elements

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

Nodes

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

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

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

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 user_action_pseudo_class, 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 class_hover, dynamic_pseudo_class (AKA), apply_when_user_interacts_doc
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_element, pseudo_class

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