Pseudo-classes Flashcards
What do pseudo-classes allow you to do?
Apply styles based on state changes and external factors.
How can pseudo-classes be used in design?
They help styles react to user input.
What does :hover do?
Applies styles when a pointing device is placed over an element.
When is :active triggered?
When an element is actively being interacted with, such as during a click.
What does :focus do?
Selects an element that can receive focus.
How does :focus-within differ from :focus?
:focus-within applies styles if any child element inside a parent is focused.
What does :target select?
An element with an id matching the URL fragment.
What does :link target?
An <a> element with an href that hasn’t been visited yet.</a>
How does :visited work?
Styles links that have already been visited by the user.
What does :disabled do?
Selects and styles disabled form elements.
When is :checked applied?
When a checkbox or radio button is in a checked state.
What is the :indeterminate state?
A state where a checkbox, radio button, or <progress> element is neither checked nor unchecked.</progress>
What does :placeholder-shown do?
Targets a form field with a placeholder but no user-entered value.
What does :valid do?
Styles an input when it has valid data.
What does :invalid do?
Styles an input when it has invalid data.
When does :in-range apply?
When an input value falls within a specified min and max.
What does :first-child select?
The first child in a group of sibling elements.
How is :first-of-type different from :first-child?
:first-of-type selects the first element of a given type among siblings, regardless of other types.
How does :nth-child(n) work?
Selects the nth child element, with indexing starting at 1.
What is :is() used for?
A shortcut to group multiple selectors into one.
What does :not() do?
Excludes elements that match a specified selector.
