css selector for sibling's child

Question

I want to use css to target every "info" class that has an "error" class two divs above. Is there a way to do this with css? For example, I want the "info" class to have a red border if the field-label above it has an "error" class.

Please include a [mcve] to your question. Adding only an image of code is not helpful [Read Why](https://meta.stackoverflow.com/a/285557) — blurfus, May 14 '20 at 17:30
btw, in your image, `.info` is not inside `.error` - based on your example, you could try `.error + .input-field > .info` — blurfus, May 14 '20 at 17:31

score 1 · Accepted Answer · answered May 14 '20 at 17:37

1

Try this:

.error + .input-field > .info{
     attribute:value     
}

answered May 14 '20 at 17:37

Luigi Jordânio

32
4

1

That worked perfectly. Thank you. – JEP May 14 '20 at 17:40

score 1 · Answer 2 · answered May 14 '20 at 17:54

.error + .input-field .info {}

.error + .input-field will select only .input-field div that is immediately preceded by the .error div. So the above code will select any element with .info class, which is inside .input-field div.

.error + .input-field > .info {}

The code above will select any .info element which is direct children of .input-field div.

.error + .input-field > .info:nth-child(1) {}

The code above will select first instance of .info element which is direct children of .input-field div.

css selector for sibling's child

2 Answers2