Questions

6 of 50

1What is a pseudo-class in CSS?

2How are pseudo-classes different from pseudo-elements?

3What is the syntax of a pseudo-class in CSS?

4Give some commonly used pseudo-classes.

5What does the :hover pseudo-class do?

6What’s the purpose of the :active pseudo-class?

7How does the :visited pseudo-class work for links?

8What is the :focus pseudo-class used for?

9What does the :checked pseudo-class do?

10How does the :disabled pseudo-class behave?

11What is the difference between :first-child and :first-of-type?

12How do :nth-child() and :nth-of-type() differ?

13How do you select every odd or even element using pseudo-classes?

14How can you style an element when it’s being hovered over along with its child?

15What does the :not() pseudo-class do?

16How can you use multiple pseudo-classes together?

17What is the difference between :link and :visited?

18What does the :target pseudo-class represent?

19How can you use :empty to detect empty elements?

20How does the :root pseudo-class differ from the html selector?

21What does the :valid and :invalid pseudo-class do?

22How can you use :required and :optional pseudo-classes in forms?

23What is the use of :in-range and :out-of-range?

24What does :read-only and :read-write do?

25How can you style an input field when it’s autofilled?

26How does the :focus-within pseudo-class work?

27What’s the difference between :focus and :focus-visible?

28What is the purpose of the :placeholder-shown pseudo-class?

29How can you style a checkbox when it is checked or unchecked?

30How can you style invalid form inputs without JavaScript?

31Can pseudo-classes be chained together? Give an example.

32What is the specificity of pseudo-classes compared to normal selectors?

33How can you use :not() effectively to exclude elements from styling?

34How does :has() pseudo-class work, and why is it powerful?

35Is :has() supported in all browsers?

36How does :is() differ from :where() in terms of specificity?

37How can you combine :is() or :where() with other selectors for cleaner code?

38What’s the difference between :nth-child() and :nth-last-child()?

39How can you style only the last element of a list using pseudo-classes?

40What does the :lang() pseudo-class do?

41How do you change a button’s color when hovered but not when disabled?

42How can you highlight the current section in a menu using :target?

43How can you style a form field differently when focused and valid?

44How do you style every third list item differently?

45How can you style alternate table rows without adding extra classes?

46How do you hide empty <p> tags using pseudo-classes?

47How can you style the parent when any child inside it is focused?

48How can you highlight a link only when it’s both focused and hovered?

49How can you style the first letter of only the first paragraph using pseudo-classes?

50How would you use :has() to select a <div> that contains an image?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

06 / 50

What’s the purpose of the :active pseudo-class?

Understanding the :active Pseudo-Class

The :active pseudo-class in CSS applies styles to an element during the moment it is being activated by the user. This typically occurs when a user clicks or taps on a button, link, or other interactive element. It provides immediate visual feedback for the interaction.

Example: Using :active

In this example, the button briefly changes its background color and slightly shrinks when pressed, and the link changes color while being clicked.

Best Practices

1
Use :active to provide instant visual feedback when users interact with elements.
2
Combine with :hover for a smooth transition from hover to active states.
3
Avoid relying solely on :active for accessibility or critical functionality, as touch devices may handle activation differently.
4
Use subtle animations or transformations to enhance the perception of interactivity.