The selection of all siblings except the first

Question

Is there a CSS selector that chooses to compliment .a + .b with respect to .a ~ .b ?

In smaller mathematical expressions, I want to select all the sibling elements that succeed in the element, excluding its first sister successor.

For example, in all dl lists, I have all dd elements colored by a specific color. But in inline dl lists I want to keep the first dd following dt in the same color, but all subsequent dd will be changed to a different color. Below is my code, which is clearly not DRY . Is there a way to do this without overriding the color again?

 /* dl lists contain dd terms all colored light aqua */ dl > dd { background-color: #c0ffee; } /* inline dl lists have dd terms displayed inline and colored yellow-green */ dl.inline > dd { display: inline; background-color: #bada33; } /* however, in an inline dl list, the first dd succeeding a dt is colored normally */ dl.inline > dt + dd { background-color: #c0ffee; } 

Answer 1

Yes, you can choose a supplement

In a simplified example, this would be: .a + .b ~ .b . You will skip the first .b , using it as a launch point for the general selector.

If I understand your dd requirements, then this will be the following:

 /* dl lists contain dd terms all colored light aqua */ dl > dd { background-color: #c0ffee; } /* inline dl lists have dd terms displayed inline */ dl.inline > dd { display: inline; } /* however, in an inline dl list, the first dd succeeding a dt is left to be colored normally and all after it are colored yellow-green */ dl.inline > dt + dd ~ dd { background-color: #bada33; } 

But , which requires that each dt be in its own dl , otherwise you have problems , the General sibling selector will not help you if they are all under the same list, because dl.inline > dt + dd ~ dd more defined than any next dl > dd .

So in your case

The solution is to avoid code repetition and have specifics that do not redefine under one list, this :

 /* dl lists contain dd terms all colored light aqua */ dl > dd, dl.inline > dt + dd { background-color: #c0ffee; } /* inline dl lists have dd terms displayed inline */ dl.inline > dd { display: inline; background-color: #bada33; }