私はHTMLの構造を以下している他の要素

Question

前に特定の要素を選択します。

<div> 
    <h2>Candy jelly-o jelly beans gummies lollipop</h2> 
    <p> 
    Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake. 
    </p> 
    <p> 
    Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu. 
    </p> 
    <h2>Dessert pie cake</h2> 
    <ul> 
    <li>liquorice</li> 
    <li>powder</li> 
    <li>dessert</li> 
    </ul> 
    <h2>Chupa chups sweet dragée</h2> 
    <p> 
    Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee. 
    </p> 
</div> 

を私はul前に、直接であるだけでh2を選択したいと思います。これどうやってするの？私のコンテンツには、ulsが多くあり、h2sが多くありますので、解決策は普遍的でなければなりません。

Answer 1

私の知る限りでは、CSSが対象となります任意のselectorsを提供しないようねえ、私はあなたがしたいと思いますより前セレクタ。 p（p + h2）の直後にあるh2として選択できますか？あなたは簡単にだけul前にある各h2にクラスを追加することができますが、あなたが見ることができるように

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

は

Example on JSFiddle

、これは、おそらくあなたはCSSに頼っている場合に使用できる最善の選択であります。そうすれば、段落セクションが別のh2と段落セクションの前にある場合を避けることができます。あなたはjQueryのを使用してこれを行うことが

：

.highlight { 
    color: #0cc; 
} 

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

Example on JSFiddle

これは、すべてのulを選択し、その後、最終的に.highlightクラスを追加する前に、その前にあるh2を選択します。

このあなたはここで読むブラウザのサポートのためにちょうど最初のH2要素

h2:first-child { color:red; } 

のスタイルを設定することができますと

Answer 2

このような

のCss

div h2{ 
font-weight:bold; 
    color:red; 
} 



ul ~ h2{ 
color:green; 
} 

ライブデモ http://jsfiddle.net/rohitazad/JxST8/4/

Answer 3

：あなたは一般的な兄弟を使用することができ、この

div h2::nth-child(2) { 

} 

Answer 4

セレクタ~。

あなたの場合、h2~ulを使用して、同じ親の中のulの前にh2に適用することができます。

Answer 5

を使用する必要があります http://www.quirksmode.org/css/contents.html#t17