- Web制作ネタ帳
writer / むーみん
コーディングするなら覚えておいておきたい！よく使う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;
}
タイトル
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
