サイドスリーブログ

コーディングするなら覚えておいておきたい!よく使うCSSセレクタ


                コーディングするなら覚えておいておきたい!よく使うCSSセレクタ

隣接した要素に適用「+」

例:隣接したsectionに適用、隣接したliに適用

HTML


<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
</section>
<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
</section>
<section><div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div></section>

CSS


section + section {
  margin-top: 3rem;
  background: #f4f8ff;
}
ul li + li {
  border-top: 1px solid #333;
  margin-top: 1rem;
  padding-top: 1rem;
}

タイトル

テキストテキストテキスト

  • リスト
  • リスト
  • リスト

タイトル

テキストテキストテキスト

  • リスト
  • リスト
  • リスト

タイトル

テキストテキストテキスト

  • リスト
  • リスト
  • リスト

子要素に適用「>」

例:section直下のdiv直下のp要素にスタイルを適用

HTML


<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<div>
<p>テキストテキスト</p>
</div>
</div>
</section>

CSS


section > div > p {
   color: #0f31ff;
}

タイトル

テキストテキストテキスト

テキストテキスト

偶数奇数に適用「:nth-child()」

例:奇数のsectionに適用

HTML


<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
</div>
</section>
<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
</div>
</section>
<section>
<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
</div>
</section>

CSS


section:nth-child(odd) {
   background: #ddd;
}

タイトル

テキストテキストテキスト

タイトル

テキストテキストテキスト

タイトル

テキストテキストテキスト

それ以外に適用「:not()」

例:.text以外の「p」タグに適用

HTML


<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<p class="text">テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
</div>
</section>

CSS


p:not(.text) {
   color: #f00;
}

タイトル

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

属性の値が指定した文字で始まる場合に適用「A[id^="B"]」

例:sampleで始まるidに適用

HTML


<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<p id="sample01">テキストテキストテキスト</p>
<p id="sample02">テキストテキストテキスト</p>
<p id="sample03">テキストテキストテキスト</p>
</div>
</section>

CSS


p[id^="sample"] {
   color: #f00;
}

タイトル

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

属性の値が指定した文字で終わる場合に適用「A[id$="B"]」

例:0で終わるidに適用

HTML


<div class="container">
<h3>タイトル</h3>
<p>テキストテキストテキスト</p>
<p id="sample10">テキストテキストテキスト</p>
<p id="sample20">テキストテキストテキスト</p>
<p id="sample30">テキストテキストテキスト</p>
</div>
</section>

CSS


p[id$="0"] {
   color: #f00;
}

タイトル

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

その他の Web制作ネタ帳 ブログ一覧