CSS: Pseudo-Classes

Question 1

What are Pseudo-Classes?

Answer 1

These are special CSS keywords that allow you to select an element based on its specific state or position.

Question 2

What are User Action Pseudo-Classes?

Answer 2

These are special keywords that allow you to change the appearance of elements based on user interactions, improving the overall user experience.

Question 3

What is the “:active” Pseudo-Class?

Answer 3

This pseudo-class lets you select the active state of an element, like clicking on a button.

Question 4

What is the “:hover” Pseudo-Class?

Answer 4

This pseudo-class defines the hover state of an element.

Question 5

What is the “:focus” Pseudo-Class?

Answer 5

This pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input.

Question 6

What is the “:focus-within” Pseudo-Class?

Answer 6

This pseudo-class is used to apply styles to an element when it or any of its descendants have focus.

Question 7

What are “input” Pseudo-Classes?

Answer 7

These pseudo-classes are used to target HTML input elements based on the state they are in before and after user interaction.

Question 8

What is the “:enabled” Pseudo-Class?

Answer 8

This pseudo-class is used to target form buttons or other elements that are currently enabled.

Question 9

What is the “:disabled” Pseudo-Class?

Answer 9

This pseudo-class lets you style an interactive element in disabled mode.

Question 10

What is the “:checked” Pseudo-Class?

Answer 10

This pseudo-class is used to indicate to the user that it is checked.

Question 11

What is the “:valid” Pseudo-Class?

Answer 11

This pseudo-class targets the input fields that meet the validation criteria.

Question 12

What is the “:invalid” Pseudo-Class?

Answer 12

This pseudo-class targets the input fields that do not meet the validation criteria.

Question 13

What are the “:in-range” and “:out-of-range” Pseudo-Classes?

Answer 13

These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints.

Question 14

What is the “:required” Pseudo-Class?

Answer 14

This pseudo-class targets input elements that have the required attribute. It signals to the user that they must fill out the field to submit the form.

Question 15

What is the “:optional” Pseudo-Class?

Answer 15

This pseudo-class applies styles input elements that are not required and can be left empty.

Question 16

What is the “:autofill” Pseudo-Class?

Answer 16

This pseudo-class applies styles to input fields that the browser automatically fills with saved data.

Question 17

What are Location Pseudo-Classes?

Answer 17

These pseudo-classes are used for styling links and elements that are targeted within the current document.

Question 18

What is the “:any-link” Pseudo-Class?

Answer 18

This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not.

Question 19

What is the “:link” Pseudo-Class?

Answer 19

This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.

Question 20

What is the “:local-link” Pseudo-Class?

Answer 20

This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.

Question 21

What is the “:visited” Pseudo-Class?

Answer 21

This pseudo-class targets a link the user has visited.

Question 22

What is the “:target” Pseudo-Class?

Answer 22

This pseudo-class is used to apply styles to an element that is the target of a URL fragment.

Question 23

What is the “:target-within” Pseudo-Class?

Answer 23

This pseudo-class applies styles to an element when it or one of its descendants is the target of a URL fragment.

Question 24

What are Tree-Structural Pseudo-Classes?

Answer 24

These pseudo-classes allow you to target and style elements based on their position within the document tree.

Question 25

What is the ":root" Pseudo-Class?

Answer 25

This pseudo-class is usually the root html element. It helps you target the highest level in the document so you can apply a common style to the entire document.

Question 26

What is the ":empty" Pseudo-Class?

Answer 26

Empty elements, that is, elements with no children other than white space, are also included in the document tree. That's why there's an :empty pseudo-class to target empty elements.

Question 27

What is the ":nth-child()" Pseudo-Class?

Answer 27

This pseudo-class allows you to select elements based on their position within a parent.

Question 28

What is the ":nth-last-child()" Pseudo-Class?

Answer 28

This pseudo-class enables you to select elements by counting from the end.

Question 29

What is the ":first-child" Pseudo-Class?

Answer 29

This pseudo-class selects the first element in a parent element or the document.

Question 30

What is the ":last-child" Pseudo-Class?

Answer 30

This pseudo-class selects the last element in a parent element or the document.

Question 31

What is the ":only-child" Pseudo-Class?

Answer 31

This pseudo-class selects the only element in a parent element or the document.

Question 32

What is the ":first-of-type" Pseudo-Class?

Answer 32

This pseudo-class selects the first occurrence of a specific element type within its parent.

Question 33

What is the ":last-of-type" Pseudo-Class?

Answer 33

This pseudo-class selects the last occurrence of a specific element type within its parent.

Question 34

What is the ":nth-of-type()" Pseudo-Class?

Answer 34

This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type.

Question 35

What is the ":only-of-type" Pseudo-Class?

Answer 35

This pseudo-class selects an element if it's the only one of its type within its parent.

Question 36

What are Functional Pseudo-Classes?

Answer 36

Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, :hover, :focus), functional pseudo-classes accept arguments.

Question 37

What is the ":is()" Pseudo-Class?

Answer 37

This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list.

Question 38

What is the ":where()" Pseudo-Class?

Answer 38

This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list. The difference between :is and :where is that the latter will have a specificity of 0.

Question 39

What is the ":has()" Pseudo-Class?

Answer 39

This pseudo-class is often dubbed the "parent" selector because it allows you to style elements that contain child elements specified in the selector list.

Question 40

What is the ":not()" Pseudo-Class?

Answer 40

This pseudo-class is used to select elements that do not match the provided selector.

Question 41

What is the "::before" Pseudo-Element?

Answer 41

This pseudo-element uses the content property to insert cosmetic content like icons just before the element.

Question 42

What is the "::after" Pseudo-Element?

Answer 42

This pseudo-element uses the content property to insert cosmetic content like icons just after the element.

Question 43

What is the "::first-letter" Pseudo-Element?

Answer 43

This pseudo-element targets the first letter of an element's content, allowing you to style it.

Question 44

What is the "::marker" Pseudo-Element?

Answer 44

This pseudo-element lets you select the marker (bullet or numbering) of list items for styling.