Select specific element before other element

Question

I have following HTML structure:

  
Candy jelly-o jelly beans gummies lollipop
  

    Cupcake ipsum dolor sit amet.          


        
                      

              相关标签:
       
      

Answer 1

You should use this

div h2::nth-child(2) {

}

Answer 2

As far as I know, CSS doesn't offer any selectors which will target before a selector. Could you select it as an h2 which is directly after a p (p + h2)?

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

Example on JSFiddle

As you can see, this is probably the best selector you can use if you're relying on CSS, although you could easily just add a class to each h2 that is before a ul. That would avoid the case where you have a paragraph section before another h2 and paragraph section.

You could do this using jQuery:

.highlight {
    color: #0cc;
}

$('ul').prev('h2').addClass('highlight')

Example on JSFiddle

This selects every ul, then selects the h2 that is before it, before finally adding the .highlight class to it.

Answer 3

The rule h2~ul will not select h2 but ul. So you will not be able to apply any style to h2.

CSS element1~element2

I have the same problem with panel location. I have a element that is followed by a . And in this case I would like to reduce the height or the min-height (depends on the panels are fixed or not) of the main panel by style application.

In case of fixed footer, because I can declare the element before the main in my html file (it will be relocated by top/left properties) I can use the ~ selector like this: footer ~ main. But in case of non fixed footer, the only way I found is to add a class at document.ready() call.

Answer 4

with this you can style just the first h2 element

h2:first-child { color:red; }

for browser support read here: http://www.quirksmode.org/css/contents.html#t17

Answer 5

You can use the general sibling selector ~.

In your case, you can use h2~ul that will apply to the h2 before ul inside the same parent.