CSSセレクタに問題があります。

Question

CSSセレクタに問題があります。私は "リストアイテム（LI）"と "リストアイテム（LI）"クラス "子"を持つコンテンツを持っています。クラス名が「.child」の最初の「リスト項目（LI）」のスタイルを設定する必要があります。唯一CSSにあります。

ul{margin:0;padding:0 32px 0 32px} 
 
li{ color:red;} 
 
.child{ 
 
    color:green; 
 
    background:red; 
 
    width:100%; 
 
} 
 
li.child ~ .child{ 
 
    color:#fff; 
 
    font-size:20px; 
 
    background:green; 
 
    width:10px; 
 
}

<ul> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li class="child"> 
 
This need to be Red Color 
 
    </li> 
 
    <li class="child">sub text</li> 
 
    <li class="child">sub text</li> 
 
    <li class="child">sub text</li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 1

あなたはそれの次の要素.child > div

Answer 2

は、あなたがこのようにしたいあなたのCSSルール

ul{margin:0;padding:0 32px 0 32px} 
li{ color:red;} 

li.child{ 
    color:yellow; 
    font-size:20px; 
} 
li.child ~ .child { 
    color:green; 
} 

Answer 3

を更新して、クラス名を指定して試すことができ、実際にあなたが取る必要があります別の<ul>あなたがあなたが望む真ん中にある 'の最初の子供をターゲットにしていないのでe :nth-child(8)他の<ul>リストを追加することなく。

ul{margin:0;padding:0 32px 0 32px} 
 
li{ color:red;} 
 
.child{ 
 
    color:green; 
 
} 
 
li.child:first-child{ 
 
    color:blue; 
 
    font-size:20px; 
 
}

<ul> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    <li>hellow</li> 
 
    </ul> 
 
    <ul> 
 
    <li class="child"> 
 
    sub 
 
    <div> 
 
    I want differnt styles for this. 
 
    </div> 
 
    </li> 
 
    <li class="child">sub text</li> 
 
    <li class="child">sub text</li> 
 
    <li class="child">sub text</li> 
 
</ul>

Answer 4

CSS

ul{margin:0;padding:0 32px 0 32px} 
li{ color:red;} 
.child{ 
    color:green; 
    background:red; 
    width:100%; 
} 
li.child ~ .child{ 
    color:#fff; 
    font-size:20px; 
    background:green; 
    width:10px; 
} 

HTML

<ul> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li>hellow</li> 
    <li class="child"> 
This need to be Red Color 
    </li> 
    <li class="child">sub text</li> 
    <li class="child">sub text</li> 
    <li class="child">sub text</li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

私は、以下の指定されたテキストの赤色のためのソリューションを得ました。 fiddle

<li class="child"> 
This need to be Red Color 
    </li>