私が達成しようとしていること:
ネストされた list-item 要素の下枠を削除しますが、親の list-item 要素の下枠は保持します。
">*" のような "ユニバーサル セレクター" を使用して、"この親に存在するすべての要素について、境界線を 0 にする" ことができるかどうかを調べようとしています。
質問:
これは可能ですか?
フィドルを参照してください: http://jsfiddle.net/VnLZH/
HTML:
<aside>
<b>What I'm trying to accomplish: </b><br>
1.) Removing the bottom border on the nested list-item element, but keeping the bottom border of its parent list-item element. <br>
2.) I'm trying to figure out if I can use a "universal selector", like ">*" to say: "For everything element that lives in this parent, make the border 0". <br><br>
<b>Question</b><br>
Is this possible?
</aside>
<h1>This works</h1>
<div class="option1">
<ul>
<li>Category</li>
<li>Category</li>
<li>Category</li>
<li>Category
<div>
<ul>
<li><input type="radio" name="radio" /> Option 1</li>
<li><input type="radio" name="radio" /> Option 2</li>
<li><input type="radio" name="radio" /> Option 3</li>
</ul>
</div>
</li>
<li>Category</li>
<li>Category</li>
</ul>
</div>
<h1>What I want to work</h1>
<div class="option2">
<ul>
<li>Category</li>
<li>Category</li>
<li>Category</li>
<li>Category
<div>
<ul>
<li><input type="radio" name="radio" /> Option 1</li>
<li><input type="radio" name="radio" /> Option 2</li>
<li><input type="radio" name="radio" /> Option 3</li>
</ul>
</div>
</li>
<li>Category</li>
<li>Category</li>
</ul>
</div>
CSS:
aside { background: #f2f2f2; margin: 1em 0; padding: .5em; }
h1 { margin: 1em 0 0; }
/* This works */
.option1 { }
.option1 ul { }
.option1 ul li { border-bottom: 1px solid black; }
.option1 ul li div ul li { border: none; }
/* What I want to work */
.option2 { }
.option2 ul { }
.option2 ul li { border-bottom: 1px solid black; }
.option2 ul li div >* { border: none; }