CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS疑似クラスとクラスの組み合わせ方を徹底解説

CSSの疑似クラス（Pseudo-classes）は、要素そのものに対して適用するだけでなく、CSSクラスと組み合わせることで、HTML要素をより柔軟かつ精密に選択・装飾することができます。この記事では、疑似クラスとクラスを組み合わせた実践的なサンプルコードを2つ紹介します。

例1：:lang()疑似クラスとクラスの組み合わせ

まずは、:lang()疑似クラスをCSSクラスと組み合わせた例を見てみましょう。:lang()は、要素のlang属性の値に基づいてスタイルを適用できる疑似クラスです。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
}
.Italy:lang(it)::after {
    padding: 20px;
    content: '~ Italy';
    font-style: italic;
}
.Spain:lang(es)::after {
    padding: 8px;
    content: '~ Spain';
    font-style: italic;
}
.Germany:lang(nl)::after {
    padding: 20px;
    content: '~ Belgium';
    font-style: italic;
}
.Spain:lang(es){
    background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
    background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
    background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>

コードのポイント

このサンプルでは、以下のテクニックが使われています。

  • .Italy:lang(it)のように、クラス名と:lang()疑似クラスを連結することで、特定のクラスかつ特定の言語属性を持つ要素だけを対象にできます。
  • ::after疑似要素とcontentプロパティを組み合わせて、要素の後に国名を自動的に表示しています。
  • linear-gradient()を使うことで、各国の国旗を模した背景グラデーションを実現しています。

出力結果

上記のコードを実行すると、以下のように表示されます。

CSS疑似クラスとクラスの組み合わせ方を徹底解説

例2：:nth-child()疑似クラスとクラスの組み合わせ

次に、:nth-child()疑似クラスをCSSクラスと組み合わせた例を見てみましょう。:nth-child()は、兄弟要素の中で何番目の子要素であるかを基準にスタイルを適用できる疑似クラスです。

<!DOCTYPE html>
<html>
<head>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    display: inline-block;
    height: 40px;
    width: 40px;
    color: white;
    border: 4px solid black;
}
.child:nth-child(1){
    background-color: #FF8A00;
}
.child:nth-child(2){
    background-color: #F44336;
}
.child:nth-child(3){
    background-color: #C303C3;
}
.child:nth-child(4){
    background-color: #4CAF50;
}
.child:nth-child(5){
    background-color: #03A9F4;
}
.child:nth-child(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Classes and CSS Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

コードのポイント

このサンプルでは、共通の.childクラスで基本スタイル（サイズ・枠線・配置）を定義しつつ、:nth-child()を使って各要素ごとに異なる背景色を設定しています。この方法なら、HTML側で個別のクラス名を付ける必要がなく、マークアップをシンプルに保つことができます。

出力結果

このコードを実行すると、以下のように6色のカラフルなブロックが表示されます。

CSS疑似クラスとクラスの組み合わせ方を徹底解説

まとめ

疑似クラスをクラスと組み合わせることで、要素の言語や出現順序といった条件に応じた、きめ細かいスタイリングが可能になります。:lang()や:nth-child()を活用すれば、HTMLの構造を変えずに柔軟なデザインを実現できるので、ぜひ実際のプロジェクトでも試してみてください。


  1. CSSの疑似クラス（Pseudo-class）とは？基本から実例までわかりやすく解説

    CSSの疑似クラス（pseudo-class）は、セレクタに追加することで、その要素の「特別な状態」を指定するためのキーワードです。これを使うことで、通常のセレクタだけでは表現できない細かいスタイル制御が可能になります。例えば、リンクにマウスカーソルが乗っている状態（:hover）、チェックボックスが選択されている状態（:checked）、すでに訪問済みのリンク（:visited）など、要素の状態に応じてスタイルを切り替えられます。代表的な疑似クラスの一覧:link … まだ訪問していないリンクに適用:visited … 訪問済みのリンクに適用:hover … マウスカーソルが要素の上にあると

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {