I have two css classes A and B that are applied on the same element. I want to change class A only when it has class B as its sibling. Is there any css selector that can do this?
Asked
Active
Viewed 320 times
0
-
Now I'm confused - you say both classes are on the same element, but one is a sibling of the other? So how many elements are there? – BoltClock Jun 29 '11 at 03:07
-
May be the sibling term is causing confusion. There is only one element. This class B is can be applied else where on some other elements. Like I want to find if this class B has class A along with it and only then add a few more properties into class B. – user811433 Jun 29 '11 at 03:10
1 Answers
3
You can apply styles to different classes as usual:
.A {
/* Styles for class A */
}
.B {
/* Styles for class B */
}
Then chain both classes to apply more styles to elements only with both classes:
.A.B {
/* Styles for elements with both classes A and B only */
}

BoltClock
- 700,868
- 160
- 1,392
- 1,356
-
1[IE6 nonsense explained in this other answer.](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305) – BoltClock Jun 29 '11 at 03:16
-
BoltClock, do you know if the classes can be in a different order than the css rule (eg. Class="A B" can match .B.A {} )? – Zachary Jun 29 '11 at 03:20
-
@Zachary: It only matters if you're concerned with IE6. That's covered in the other answer I link to. – BoltClock Jun 29 '11 at 03:20
-
Thanks BoltClock. In the process of solving this issue I realized that if class B has a background property and I am trying to over write only the image using the background-image property in A, it does not work. That was causing problems for me. – user811433 Jun 29 '11 at 03:31
-
BoltClock, thanks... I read it, but missed the question/answer in the comments. Thanks... – Zachary Jun 29 '11 at 03:33