CSSでスタイルを当てるときに参考になるようにセレクタの指定方法をまとめて解説していきます。
- セレクタの指定方法がわかる
- 自在にスタイルが当てられるようになる
目次
基本編
まずは基本編として非常によく使う指定方法を解説していきます。
HTMLタグ名で指定
pやinputなどのHTMLタグ名でのスタイル指定方法です。
<p>Text</p>
<style>
p {
font-size: 2rem;
}
</style>class名で指定
任意のclass名でのスタイル指定方法です。
<p class="title">Text</p>
<style>
.title {
font-size: 2rem;
}
</style>id名で指定
任意のid名でのスタイル指定方法です。
<p id="title">Text</p>
<style>
#title {
font-size: 2rem;
}
</style>複数要素で指定
複数のタグやclassに対しては、カンマで区切って指定します。
<div>
<p class="title">Title</p>
<p id="sub-title">Sub Title</p>
</div>
<style>
div, .title, #sub-title {
padding: 10px;
}
</style>様々なセレクタ指定方法
続いて様々なセレクタ指定方法を解説していきます。
子孫要素を指定
親要素の子から孫までの要素を指定するには、親 子以下のように指定します。
モグモグさん
wrapperクラスの中のp全てに適用されます。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<div class="container">
<p id="sub-title">Sub Title</p> <!-- 適用 -->
</div>
</div>
<style>
.wrapper p {
color: #0066bb;
}
</style>子要素を指定
親要素の子要素を指定するには、親 > 子のように指定します。
モグモグさん
wrapperクラスの中の1階層下のp全てに適用されます。
孫要素には適用されません。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="label">Label</p> <!-- 適用 -->
<div class="container">
<p id="sub-title">Sub Title</p>
</div>
</div>
<style>
.wrapper > p {
color: #0066bb;
}
</style>兄弟要素を指定
指定した要素より後の同じ階層の要素を指定するには、要素 ~ 兄弟要素のように指定します。
モグモグさん
指定した要素の同じ階層かつ後に続く要素に適用されるというのがポイントです！
<div class="wrapper">
<label class="main-label">Main Label</label>
<p class="title">Title</p> <!-- 適用 -->
<label class="sub-label">Sub Label</label> <!-- 適用 -->
<div class="container">
<p id="sub-title">Sub Title</p>
</div>
</div>
<style>
.title ~ label {
color: #0066bb;
}
</style>隣の要素を指定
指定した要素より後の隣の要素を指定するには、要素 + 要素のように指定します。
モグモグさん
完全に隣の要素のみ適用されます。
<div class="wrapper">
<label class="main-label">Main Label</label>
<p class="title">Title</p>
<label class="sub-label">Sub Label</label> <!-- 適用 -->
<label>Third Label</label>
<div class="container">
<p id="sub-title">Sub Title</p>
</div>
</div>
<style>
.title + label {
color: #0066bb;
}
</style>最初の要素を指定
指定した要素の最初の要素を指定するには、要素:first-childのように指定します。
モグモグさん
指定した要素の最初の子要素である場合でしか適用されないので注意です。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p>
</div>
<style>
.wrapper p:first-child {
color: #0066bb;
}
</style>上で注意点としてあげたように、:first-childの場合は厳密に最初の子要素である場合でしか適用されません。
出てきた最初の要素を指定したい場合は、要素:first-of-typeを使うことで指定できます。
<div class="wrapper">
<label class="label">Label</label>
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p>
</div>
<style>
.wrapper p:first-of-type {
color: #0066bb;
}
</style>最後の要素を指定
指定した要素の最後の要素を指定するには、要素:last-childのように指定します。
モグモグさん
指定した要素の最後の子要素である場合でしか適用されないので注意です。
<div class="wrapper">
<p class="title">Title</p>
<p class="sub-title">Sub Title</p> <!-- 適用 -->
</div>
<style>
.wrapper p:last-child {
color: #0066bb;
}
</style>上で注意点としてあげたように、:last-childの場合は厳密に最初の子要素である場合でしか適用されません。
出てきた最後の要素を指定したい場合は、要素:last-of-typeを使うことで指定できます。
<div class="wrapper">
<p class="title">Title</p>
<p class="sub-title">Sub Title</p> <!-- 適用 -->
<label class="label">Label</label>
</div>
<style>
.wrapper p:last-of-type {
color: #0066bb;
}
</style>最初から〜番目の要素を指定
最初から〜番目の要素指定するには、要素:nth-of-type(〜番目)のように指定します。
モグモグさん
〜番目の数字は半角数字です。
<ul class="sports">
<li>baseball</li>
<li>soccer</li> <!-- 適用 -->
<li>golf</li>
<li>basketball</li>
<li>judo</li>
<li>dance</li>
</ul>
<style>
ul li:nth-of-type(2) {
color: #0066bb;
}
</style>後ろから〜番目の要素を指定
後ろから〜番目の要素指定するには、要素:nth-last-of-type(〜番目)のように指定します。
モグモグさん
〜番目の数字は半角数字です。
<ul class="sports">
<li>baseball</li>
<li>soccer</li>
<li>golf</li>
<li>basketball</li> <!-- 適用 -->
<li>judo</li>
<li>dance</li>
</ul>
<style>
ul li:nth-last-of-type(3) {
color: #0066bb;
}
</style>奇数の要素を指定
奇数の要素指定するには、要素:nth-of-type(odd)のように指定します。
<ul class="sports">
<li>baseball</li> <!-- 適用 -->
<li>soccer</li>
<li>golf</li> <!-- 適用 -->
<li>basketball</li>
<li>judo</li> <!-- 適用 -->
<li>dance</li>
</ul>
<style>
ul li:nth-of-type(odd) {
color: #0066bb;
}
</style>偶数の要素を指定
偶数の要素指定するには、要素:nth-of-type(even)のように指定します。
<ul class="sports">
<li>baseball</li>
<li>soccer</li> <!-- 適用 -->
<li>golf</li>
<li>basketball</li> <!-- 適用 -->
<li>judo</li>
<li>dance</li> <!-- 適用 -->
</ul>
<style>
ul li:nth-of-type(even) {
color: #0066bb;
}
</style>倍数の要素を指定
倍数の要素指定するには、要素:nth-of-type(〜n)のように指定します。
モグモグさん
〜nの数字は半角数字です。
3nなら3の倍数、2nなら2の倍数という感じです！
<ul class="sports">
<li>baseball</li>
<li>soccer</li>
<li>golf</li> <!-- 適用 -->
<li>basketball</li>
<li>judo</li>
<li>dance</li> <!-- 適用 -->
</ul>
<style>
ul li:nth-of-type(3n) {
color: #0066bb;
}
</style>HTMLタグの属性で指定
HTMLタグの属性で指定するには、要素[属性]のように指定します。
モグモグさん
この例だと、class属性を持つ要素に適用されます。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p>Sub Title</p>
</div>
<style>
p[class] {
color: #0066bb;
}
</style>HTMLタグの属性の完全一致指定
HTMLタグの属性の完全一致で指定するには、要素[属性名="文字"]のように指定します。
モグモグさん
この例だと、class名が”title”の要素に適用されます。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p>
<p class="text">TextText</p>
</div>
<style>
p[class="title"] {
color: #0066bb;
}
</style>
HTMLタグの属性の部分一致指定
HTMLタグの属性の部分一致で指定するには、要素[属性名*="部分一致文字"]のように指定します。
モグモグさん
この例だと、class名に”tit”が入っている要素に適用されます。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p> <!-- 適用 -->
<p class="text">TextText</p>
</div>
<style>
p[class*="tit"] {
color: #0066bb;
}
</style>
前方一致している要素を指定
HTMLタグの属性の前方一致で指定するには、要素[属性名^="文字"]のように指定します。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p>
<p class="text">TextText</p>
</div>
<style>
p[class^="tit"] {
color: #0066bb;
}
</style>後方一致している要素を指定
HTMLタグの属性の後方一致で指定するには、要素[属性名$="文字"]のように指定します。
<div class="wrapper">
<p class="title">Title</p> <!-- 適用 -->
<p class="sub-title">Sub Title</p> <!-- 適用 -->
<p class="text">TextText</p>
</div>
<style>
p[class$="title"] {
color: #0066bb;
}
</style>まとめ
CSSでスタイルを当てるときに参考になるようにセレクタの指定方法をまとめて解説しました。
モグモグさん
こんなものもあるんだーくらいで引き出しに入れておくと、CSSを書くときに柔軟にかけると思いますのでぜひ参考にしてみてください！
