2016-08-03 13 views
1

子どもがいるulを得る方法ul。私はこれらのli plz help me.iにCSSを設定したいと思います。liは動的にprint.whenするので、私は以下のようにすべての親のliをプラスに設定するようにクラスを設定することはできません。
子供のulを持つ子を得る方法

.ul{ 
 
width:200px; 
 
position:relative; 
 
} 
 
.ul li{ 
 
    position:relative; 
 
} 
 
.ul > li:before{ 
 
content : '+'; 
 
position: absolute; 
 
top: 0; 
 
right: 7px; 
 
}
<ul class="ul"> 
 
<li>List 1</li> 
 
<li>List 2</li> 
 
<li>List 3 
 
    <ul> 
 
     <li>Sub List 1</li> 
 
     <li>Sub List 2</li> 
 
     <li>Sub List 3</li> 
 
    </ul> 
 
</li> 
 
<li>List item 4</li> 
 
</ul> 
 
This is style for that.

答えて

2

あなたが実際に非常に近いです。そのトリックは、.ulの中にある各ulのスタイルだけです。 +を表示したい場所に移動します(親の最初の行の後)。

.ul { 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
.ul li { 
 
    position: relative; 
 
} 
 
.ul ul::before { 
 
    content: '+'; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 7px; 
 
}
<ul class="ul"> 
 
    <li>List 1</li> 
 
    <li>List 2</li> 
 
    <li>List 3 
 
    <ul> 
 
     <li>Sub List 1</li> 
 
     <li>Sub List 2</li> 
 
     <li>Sub List 3</li> 
 
    </ul> 
 
    </li> 
 
    <li>List item 4</li> 
 
</ul> 
 
This is style for that.

2

あなたはのでCSSで、あなたは親セレクタを持っていないことはできません。

のような何かを行うことはできません。例えば

:再レンダリングページの場合のようなパフォーマンスの問題が多いので、これはある

ul:has(li) { color: #ddd; } 

ul < li { color: #ddd; } 

、あるいは何かあなたはそのようなparent selectorを持っています。だからこそW3Cの人たちは親セレクタツールを追加していません。

はそれにより読み込むためここを見て:

Is there a CSS parent selector?

Parent selectors in CSS

+1

良いですね!ありがとうございました – eisbehr

関連する問題