在CSS中，如何一起选择子元素？

Question

Hey guys I'm trying to put a border around a few elements on this page using Stylish (Chrome Extension). Here is the structure of how the page is, the letters representing a different class..

A
  B
  B
  C
  C

I want to put the border around the "C"s, if I do it just by calling the C class, I would end up with border's between the two C classes. So is there a way I can select both the C's together as one element.

With Stylish you cannot change the HTML of a page, just css, I know I could just nest it in HTML, but that's not an option.

Edit: C also appears in other area's of the page.

Answer 1

Is this what you want to achieve?

 .a>.c { border: solid red; border-width: 0 1px; } .a>*:not(.c) + .c, .a>.c:first-child { border-top-width: 1px; } .a>.c + *:not(.c) { border-top: 1px solid red; } .a>.c:last-child { border-bottom-width: 1px; } 

 <div class="a"> <div class="b">B</div> <div class="b">B</div> <div class="c">C</div> <div class="c">C</div> <div class="d">D</div> </div> <hr /> <div class="a"> <div class="c">C</div> <div class="b">B</div> <div class="b">B</div> <div class="c">C</div> <div class="c">C</div> <div class="d">D</div> </div> <hr /> <div class="a"> <div class="a">A</div> <div class="b">B</div> <div class="b">B</div> <div class="c">C</div> <div class="c">C</div> <div class="d">D</div> <div class="c">C</div> </div> <hr /> <div class="a"> <div class="c">C</div> <div class="c">C</div> <div class="c">C</div> </div> <hr /> <div class="a"> <div class="c">C</div> </div> 

The only "trick" is that I have to use the top border of an immediately following element after a .c in order to place the "bottom" border of the last .c in a group of .c s. Currently there's no way to select a group of immediate siblings with a certain class. The point in evaluation when you know the last element with .c in a group is the last is when you evaluate the next item and see it doesn't have .c . But at that point, you can't style the element before, because CSS only parses forward, never backwards.

In short, if you have a margin between elements, there is no way to do only with CSS ( * see note). It would be trivial with javascript (I can provide it, if of any help).

---

* Actually, you could make this work even if with margins between elements, by null -ing the margins between .c and any :not(.c) and applying the difference to the first child of the :not(.c) instead. It's cumbersome to find a magical solution that would work in any case. Most times, these things are coded looking at the existing elements and finding tricks to make it "look like" it works.
That's all we have right now. :)

Answer 2

Assuming that there is no space between and of your <div>

 div{ border: 1px solid #dadada; min-height: 50px; } .c{ border: 1px solid red; } .c + .c{ border-top-color: white; margin-top: -1px; } 

 <div class="a"> <div class="b"></div> <div class="b"></div> <div class="c"></div> <div class="c"></div> <div class="b"></div> </div> 

You will need to set the border-top-color to that of the background of .c - if you have margins at the bottom of .c , you will need to add that margin to the border width and apply the negative margin at the top.

Answer 3

If you want a solution which will account for any number of .c elements, you need to apply:

• a border-left and a border-right to all .c elements
• a border-top to the first .c element
• a border-bottom to the last .c element

But. There is no :nth-of-class pseudo-selector.

So:

• the first .c element can be selected (instead) with .b + .c .
• the last .c element can be selected (instead) with :last-of-type

Working Example:

 section { width: 120px; text-align: center; background-color: rgb(191, 191, 191); } div { padding: 3px; } .c { border-right: 2px solid rgb(255, 0, 0); border-left: 2px solid rgb(255, 0, 0); } .b + .c { border-top: 2px solid rgb(255, 0, 0); } div:last-of-type.c { border-bottom: 2px solid rgb(255, 0, 0); } 

 <section> <div class="a">a</div> <div class="b">b</div> <div class="b">b</div> <div class="c">c</div> <div class="c">c</div> </section>