複数のセレクタ(要素)選択と絞り込み選択でCSSを記述する方法

CSSには複数のセレクタ(要素)名を指定して記述する方法がいくつかあります。コツを覚えるまで大変だと思いますが、これらを覚えておくと「スタイルシートが見やすい」「スタイルシートが軽くなった」などのメリットがありますので是非参考にしてもらえたら嬉しいです。

それでは早速、記述方法をご紹介いたします！

同じ要素内にある複数のクラスに対して同じCSSを適用

セレクタ(要素)を繋げて記述します。※半角スペースで区切らない

htmlの記述例

<!-- 同じ要素内にある複数のクラスに対して同じCSSを適用 -->
<div class="size weight color">
  <p  class="text">フォントのサイズ、太さ、色を変更します。</p>
</div>

cssの記述例

<!-- セレクタ(要素)を繋げて記述します。※半角スペースで区切らない -->
.size.weight.color{
  font-size: 20px;
  font-weight: bold;
  color: red;
}

入れ子構造の要素に対してCSSを適用

クラス名やID名の間に「 」半角スペースを入れて記述します。※全角スペースはダメ

htmlの記述例

<!-- 入れ子構造の要素に対してCSSを適用 -->
<div class="size">
  <p  class="text_1">フォントのサイズを変更します。</p>
</div>

<div class="weight">
  <p  class="text_2">フォントの太さを変更します。</p>
</div>

<div class="color">
  <p  class="text_3">フォントの色を変更します。</p>
</div>

cssの記述例

/* <!-- 半角スペースを入れて記述しています。 --> */
.size .text_1{
  font-size: 20px;
}

.weight .text_2{
  font-weight: bold;
}

.color .text_3{
  color: red;
}

場所を限定せずに複数のクラス、要素に対して同じCSSを適用

セレクタ(要素)を「 , ( カンマ ) 」で区切って記述します。

htmlの記述例

<!-- 場所を限定せずに複数のクラス、要素に対して同じCSSを適用 -->
<div class="size">
  <p  class="text">フォントのサイズを変更します。</p>
</div>

<div class="weight">
  <p  class="text">フォントの太さを変更します。</p>
</div>

<div class="color">
  <p  class="text">フォントの色を変更します。</p>
</div>

cssの記述例

/* <!-- カンマで区切ります --> */
.size,.weight,.color{
  font-size: 20px;
  font-weight: bold;
  color: red;
}

複数の属性セレクタで絞り込みCSSを適用

[ 属性名]を入れて記述します。

htmlの記述例

<!-- 複数の属性セレクタで絞り込みCSSを適用 -->
<p><a href="" title="text">フォントの装飾</a></p>

cssの記述例

/* <!-- [ ]を入れて記述しています。 --> */
a[href][title]{
　font-size: 20px;
  font-weight: bold;
  color: red;
  border-bottom:none;
  text-decoration: none;
}

擬似クラスと属性セレクタで絞り込みCSSを適用

〇[属性名=”属性値”]で記述します。

htmlの記述例

<!-- リンクを挿入する際に使用するaタグ① -->
<p><a class="text" href="">フォントの装飾①</a></p>

<!-- リンクを挿入する際に使用するaタグ② -->
<p><a href="" target="blank">リンクを別タブで開く</a></p>

<!-- 画像を挿入する際に使用するimgタグ -->
<iimg src="画像パス" alt="画像の代替テキスト">

<!-- テキストボックスを使用する際のinputタグ -->
<input type="text"></input>

cssの記述例

/* <!-- a[class="text"]で記述しています。 --> */
a[class="text"]{
　font-size: 20px;
  font-weight: bold;
  border-bottom:none;
  text-decoration: none;
  color:red;
}

要素に付加された属性とその値を指定し、CSSの効果を適用させるのが「属性セレクタ」です。

擬似クラスと擬似要素を指定してCSSを適用

「○:擬似クラス:擬似要素」の順番で記述します。

htmlの記述例

<!-- 擬似クラスと擬似要素を指定してCSSを適用 -->
<p class="text">フォントの装飾</p>

cssの記述例

/* <!--  p[class="text"]:before で記述しています。 --> */
p[class="text"]:before {
  content:"☆★☆"; 
  font-size:15px;
}

/* <!--  p[class="text"]:after で記述しています。 --> */
p[class="text"]:after {
  content:"☆★☆"; 
  font-size:15px;
}

結果）☆★☆フォントの装飾☆★☆

代表的な擬似クラスと擬似要素

擬似クラス

• :hover
• :link
• :visited
• :active
• :first-child
• :last-child

擬似要素

• :before
• :after
• :first-letter
• :first-line

擬似クラスと擬似要素はアイコン、テキストなどを表示させたりできますのでデザインのワンポイントとして活用できます♪

最後に

いかがでしたでしょうか。私も最初は大変でしたが慣れるとコーディングの幅も広がっていきどんどんコーディングが楽しくなっていきました♪

もしこの記事を参考にしていただき、手助けになれれば感激です。

今後とも色々記事を投稿しますので定期購読お願いします！