Menu
Is the following
.a + .b + .c
a valid selector for an element of class c that directly follows two elements of class a and b respectively? It seems to work in Chrome 16. Is it clear from the standard, that it should work?
926
The adjacent sibling combinator ( + ) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element .
Adjacent Sibling Selector (+)The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".
Any Selector Can Be Grouped You can place any valid selector in a group, and all elements in the document that match all the grouped elements will have the same style based on that style property.
One example of adjacent siblings is the EM and STRONG elements within the paragraph. In fact, the only place in Figure 1 where elements don't have adjacent siblings is where they don't have any siblings at all, such as the A element; and in the unordered list with three LI children.
Works fine for me and is standard, as far as I know. (Have never seen anything to the contrary)
Example: http://jsfiddle.net/6ykxB/
If it were just utilizing the last adjacent selector, this would still work
.z + .b + .c
but it doesn't
Example2: http://jsfiddle.net/6ykxB/1/
A reference on SitePoint mentions multiple adjacent sibling selectors, a further confirmation that they are standard:
http://reference.sitepoint.com/css/adjacentsiblingselector
However, there is a warning for elements with :hover and multiple selectors:
Safari (up to and including version 4) and Chrome (up to and including version 3) behave “buggily” when the adjacent selector is preceded by an element using the :hover pseudo class. The bug varies between versions but the rule is either not applied at all, or applied inconsistently.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
