CSS select a class preceded by another class

css, css-selectors, operator-precedence

Solution

You need to reverse your order. Note, this will select all `.CCCC` that are siblings following `.BBBB`.

.BBBB ~ .CCCC {
    width: 10px;
    border: 1px solid #000;
}

If you only want the next one, which must immediately follow it, then this:

.BBBB + .CCCC {
    width: 10px;
    border: 1px solid #000;
}

It is helpful to remember that with the current capabilities of CSS, the very last item in your selector string is always going to be the item you are actually selecting and applying the properties to (if a parent selector ever comes about, then that may not be so). So your incorrect `.CCCC ~ .BBBB` should have flagged you as incorrect because the `.BBBB` is the last item, but you were wanting to change the `.CCCC`.

Problem

Reading CSS documentation I'm trying to create a selector for a class preceded by another class: ``` <div class="AAAAA"> <div class="CCCC"></div> </div> <div class="AAAAA"> <div class="BBBB"></div> <div class="CCCC"></div> </div> ``` I need to create a selector for `.CCCC` preceded by `.BBBB`, here my code: ``` .CCCC { width: 100px; height: 20px; border: 1px solid #000; } .CCCC~.BBBB { width: 10px; border: 1px solid #000; } ``` So in my example the first `div` with `CCCC` class whould have a width of `100px`, the second `div` with `CCCC` that id preceded by the `div` with class `BBBB` should have a width of `10px`. Any idea why this is not working?

Original source