Is there a way to select hover, focus, active, visited all together?

[bendqh1]

Repeating this :hover code for :focus, :active, :visited, will be a lot of CSS.

.mobile-nav-button__label:hover {
	color: #000
}
.mobile-nav-button__icon:hover,
#site-header__inner > div > div.mobile-buttons > button > span.mobile-nav-button__icon:before:hover,
#site-header__inner > div > div.mobile-buttons > button > span.mobile-nav-button__icon:after:hover {
	border-top: 3px solid #000;
}

• One more similar chunk of code for :focus.
• One more similar chunk of code for :active.
• One more similar chunk of code for :visited.

Is there a way to address several pseudo classes in one command?
Is there a way to select hover, focus, active, visited all together?

[PaulOB]

@bendqh1

Is there a way to address several pseudo classes in one command?

You can use :is.

e.g.

a:is(:hover,:focus,:active){
  background:pink;
}

However you will still need to match weight if you’ve done something very silly like this.

#site-header__inner > div > div.mobile-buttons > button > span.mobile-nav-button__icon

This is one of those rare cases where !important would be useful because of the previous bad code.

a:is(:hover,:focus,:active){
  background:pink!important;
}

Note that focus and active only apply to specific elements like anchors and button elements…

Also you can’'t say .icon:after:hover {}. It has to be .icon:hover:after {}

[tutsinsider]

Yes, the :is() pseudo-class (or :matches() ) can be used to group multiple selectors together. It allows you to specify multiple selectors in a comma-separated list within the parentheses. If any of the selectors match, the rule will be applied.

Certainly! Here’s how you can use both :is() and :matches() to group multiple pseudo-classes:

:is(:hover, :focus, :active, :visited) {
  /* Styles for hover, focus, active, and visited states */
  color: #000;
}

:matches(:hover, :focus) .mobile-nav-button__icon,
:matches(:hover, :focus) #site-header__inner > div > div.mobile-buttons > button > span.mobile-nav-button__icon:before,
:matches(:hover, :focus) #site-header__inner > div > div.mobile-buttons > button > span.mobile-nav-button__icon:after {
  /* Styles for hover and focus states */
  border-top: 3px solid #000;
}

Both :is() and :matches() can be used interchangeably for this purpose. They essentially perform the same function of grouping selectors.

[PaulOB]

@tutsinsider

Both :is() and :matches()

:matches is deprecated and should not be used. If you are going to use AI generated answers then you should take care to check the validity of it’s answer.

I already answered the question anyway so the post adds nothing new.