How to apply a CSS selector to an element with two classes

Question

Is there a way to apply a CSS selector such as focus to an element with two classes?

For example:

Given the following two classes in my CSS file:

.form__input:focus {
    border-color: blue;
    background: #ffffff;
}

.form__input-error {
    color: red;
    border-color: red;
}

is it possible to add the next:

.form__input .form__input-error:focus {
    color: red;
    border-color: red;
    background: #ffffff
}

I am asking, because in my specific case this is not working. I am not sure though whether this is due to the CSS or due to some javascript that I am performing.

You need to share your code, we cannot complete half a puzzle. — Benjamin James Kippax, Dec 07 '21 at 21:16
allright, I have changed the entire question to sth that can actually be answered and might help me fix this issue. — Luk, Dec 07 '21 at 21:44

score 0 · Answer 1 · answered Dec 07 '21 at 21:59

If you want to select an element with 2 classes, for instance, using your example...

.form__input:focus {
    border-color: blue;
    background: #ffffff;
}

.form__input-error {
    color: red;
    border-color: red;
}

/* 
    Note the lack of space between the classes.
    You can chain as many classes as you like.
*/
.form__input.form__input-error:focus {
    color: red;
    border-color: red;
    background: #ffffff
}

How to apply a CSS selector to an element with two classes

1 Answers1