CSSセレクターのチートシート

要素型セレクター - type selectors (elementname)

span { background-color : lightpink ; font-weight : bold ;}
<div>

<p> <span></span> <span></span> </p>

<p> <span></span> <span></span> </p>

</div>

クラスセレクター - class selectors (.classname)

span.sample02 { background-color : lightpink ; font-weight : bold ;}
/* 以下と同じ
span[class~=sample02] {background-color : lightpink ; font-weight : bold ;}
*/
<div>

<p> <span></span> <span class="sample02"></span> </p>

<p> <span class="sample02"></span> <span></span> </p>

</div>

IDセレクター - ID selectors (#idname)

#sample03 { background-color : lightpink ; font-weight : bold ;}
/* 以下と同じ
[id=sample03] { background-color : lightpink ; font-weight : bold ;}
span#sample03 { background-color : lightpink ; font-weight : bold ;}
span[id=sample03] { background-color : lightpink ; font-weight : bold ;}
*/
<div>

<p> <span id="sample03"></span> <span></span> </p>

<p> <span class="sample03"></span> <span></span> </p>

</div>

全称セレクター - universal selectors (*)

div.sample04 * { background-color : lightpink ; font-weight : bold ;}
<div class="sample04">

<p> <span></span> </p>

    <ul>
  • <li></li>
    • </ul>
</div>

属性セレクター - attribute selectors ([attr=value])

a[title]{ background-color:aquamarine; } /*指定した名前の属性を持つ*/
a[href="https://example.jp"]{ background-color:khaki; }/*属性の値が一致*/
a[class~=sample05_01]{ background-color:lightgreen; }/*属性の値が一致または空白区切りのうちの１つと一致*/
a[lang|=ja]{ background-color:pink; }/*属性の値と一致または値のハイフン-までと一致*/
a[href^="https://example.co"]{ background-color:skyblue; }/*属性の値が指定した値で始まる*/
a[href$=net]{ background-color:palegoldenrod; }/*属性の値が指定した値で終わる*/
a[href*=info]{ background-color:lightblue; }/*属性の値に指定した値が含まれる*/
a[class=ab1 i]{ background-color:lightcoral; }/*iの付与で大文字小文字を無視する*/
a[class=ab2 I]{ background-color:lightsalmon; }/*iの付与で大文字小文字を無視する*/
a[class=ab3]{ background-color:bisque; }/*大文字小文字の区別がある*/
<div> </div>

子孫結合子 - descendant combinator（子孫）「A B」

div.sample06 p { background-color : lightpink ; font-weight : bold ;}
<div class="sample06">

<p></p>

<div>

<p><p>

</div>
</div>

子結合子 - child combinator（直下の子）「A > B」

div.sample07 > p { background-color : lightpink ; font-weight : bold ; }
<div class="sample07">

<p></p>

<div>

<p><p>

</div>
</div>

一般兄弟結合子 - general sibling combinator（兄弟）「A ~ B」

li.sample08 ~ li { background-color : lightpink ; font-weight : bold ; }
<div>
    <ul>
  • <li></li>
  • <li class="sample08">
      <ul>
    • <li></li>
      • </ul>
    </li>
  • <li></li>
  • <li></li>
    • </ul>
</div>

隣接兄弟結合子 - adjacent sibling combinator（隣の兄弟）「A + B」

li.sample09 + li { background-color : lightpink ; font-weight : bold ; }
<div>
    <ul>
  • <li></li>
  • <li class="sample09">
      <ul>
    • <li></li>
      • </ul>
    </li>
  • <li></li>
  • <li></li>
    • </ul>
</div>