皆さんこんにちは、ZeroTerasu(@ZeroTerasu)です。
ウェブサイト制作の際、予想外にCSSセレクタの指定が困難な場面に遭遇されたことはないでしょうか？今回は、類似構造が複数存在するウェブサイトや深い階層の要素にCSSを適用しなければならない際のCSSセレクタの指定方法の例を記事にしました。
対象のタグと対象のクラスが同じ要素に含まれているとき
CSSセレクタ指定方法： タグ名 .クラス名
使用場面：対象のタグが、divタグなどhtml中に複数存在するタグであり、タグ名とクラス名をセットで特定する場合
divタグなどhtml中に複数存在するタグを指定する場合は、idが付与されていれば、「#id名」で特定が容易ですが、id名を乱発すると、複数のhtmlファイルを1つのCSSファイルで管理している場合などでidの重複管理が大変になります。
そこで、タグ名とクラス名をセットでセレクタに設定して特定する場合があります。指定するタグとクラスが同一要素に存在する場合です。順番は、必ず「タグ名.クラス名」の順番で指定します。「タグ名」と「.クラス名」の間にスペースは開けません。（スペースがあるとタグ名の子要素としてのクラス名と認識されてしまいます。）
例、
[CSSセレクタ] p.child
<p class="child">
下記の例では、「息子要素です。」のテキストが入力されたpタグのみにCSSを適用したい場面を想定しています。一つ上の階層のdivタグにも"child"クラスが付与されていますので、クラスだけでは要素を特定できません。そこで、pタグとchildクラスをセットで指定して特定します。
<div class="parent">
<p>親要素です。</p>
<div class="child">
子要素です。
<p class="child">息子要素です。</p>
</div>
</div>p.child{
background-color:pink;
}See the Pen css-selector-1 by ZeroTerasu (@zeroterasu) on CodePen.
親要素をクラス名で指定、子要素をタグ名で指定
CSSセレクタ使用方法：.クラス名 タグ名
使用場面：親要素が、divタグなどhtml中に複数存在するタグであり、その子要素に対してCSSを適用させる場合。
親要素がクラス名で特定可能であり、その子要素に対してCSSを適用させたい場合です。「.クラス名 半角スペース タグ名」と親と子の順番に指定するので分かりやすいかと思います。
例、
[CSSセレクタ]：.parent p
<div class="parent"<p>子要素</p></div>)
下記の例でも、 「息子要素です。」のテキストが入力されたpタグのみにCSSを適用したい場面を想定しています。 どのpタグも親要素にdivタグを持っていますので、divタグをクラス名で特定して、その子要素のpタグを特定する戦略でいきます。
<div class="parent">
<p>親要素です。</p>
<div class="child">
子要素です。
<p>息子要素です。</p>
</div>
<div class="pet">
<p>ペット要素です。</p>
</div>
</div>.child p{
background-color:yellow;
}See the Pen css-selector-2 by ZeroTerasu (@zeroterasu) on CodePen.
親要素をクラス名、子要素をタグ名、孫要素をタグ名、曾孫要素をクラス名 タグ名で指定
CSSセレクタ使用方法：.クラス名 タグ名 タグ名 .クラス名 タグ名
似た構造のセクションが複数存在するWEBサイト
類似の構造が複数存在するウェブサイトの場合は、上流階層～深い階層 を指定していく必要がある場面が発生します。（この場合は、idの付与を検討するなど、html構造の再構築も考えられますが、現状のhtmlから変更無しでCSSを適用したい場合もあるかと思います。）そんなときは、下記のようにクラス名とタグ名を組み合わせて指定して、特定の要素にのみCSSを適用できる場合があります。
例、
[CSSセレクタ]: .parent section article .grand-grand-child p
下記の例では、 「曾孫要素です。」のテキストが入力されたpタグ(8行目)のみにCSSを適用したい場面を想定しています。 非常に類似した"parent"クラスを持つ2つのdivタグが存在します。このような場合は、上流階層から下流階層まで長くCSSを適用するしかない場合があります。類似構造の中の違いを見つけ、CSSを適用できるよう工夫します。場合によっては、新たなidやクラス名を付与することを検討した方が良い場合もあります。
<div class="parent">
<p>親要素です。</p>
<section>
<p>子要素です。</p>
<article>
<p>孫要素です。</p>
<div class="grand-grand-child">
<p>曾孫要素です。</p>
</div>
</article>
</section>
</div>
<div class="parent">
<a>親要素です。</a>
<section>
<p>いとこ要素です。</p>
<article>
<a>いとこの孫要素です。</a>
<div class="grand-grand-child">
<a>いとこの曾孫要素(男子)です。</a>
</div>
<div class="grand-grand-child">
<a>いとこの曾孫要素(女子)です。</a>
</div>
</article>
</section>
</div>.parent section article .grand-grand-child p{
background-color: green;
}See the Pen css-selector-3 by ZeroTerasu (@zeroterasu) on CodePen.
今回紹介した方法でも特定が困難な場合は、「html構造の見直し」、「nth-child()」疑似クラスの使用、属性の指定 等の検討が必要になるかと思います。これらの方法については、また別途記事にしてみたいと思います。
コメント