階層フィルタ

【子要素】
<style>
#id1 li { color: black; }
</style>

<ol id="id1" style="color:black;">
  <li>子要素
  <li>子要素
  <li>子要素
  <ol>
    <li>孫要素
    <li>孫要素
  </ol>
  <li>子要素
  <li>子要素
</ol>

<script>
$( "#id1 > li" ).css( { color:"red", border:"2px red dashed" } );
</script>

【子孫要素】
<style>
#id2 li { color: black; }
</style>

<ol id="id2">
  <li>子要素
  <li>子要素
  <li>子要素
  <ol>
    <li>孫要素
    <li>孫要素
  </ol>
  <li>子要素
  <li>子要素
</ol>

<script>
$( "#id2 li" ).css( { color:"red", border:"2px red dashed" } );
</script>

【隣接兄弟要素】
<style>
#id3 li { color: black; }
</style>

<ol id="id3">
  <li>項目
  <li id="id31">兄要素 (基準)
  <li>弟要素
  <ol>
    <li>項目
    <li>項目
  </ol>
  <li>弟要素
  <li>弟要素
</ol>

<script>
$( "#id31 + li" ).css( { color:"red", border:"2px red dashed" } );
</script>

【一般兄弟要素】
<style>
#id4 li { color: black; }
</style>

<ol id="id4">
  <li>項目
  <li id="id41">兄要素 (基準)
  <li>弟要素
  <ol>
    <li>項目
    <li>項目
  </ol>
  <li>弟要素
  <li>弟要素
</ol>

<script>
$( "#id41 ~ li" ).css( { color:"red", border:"2px red dashed" } );
</script>