指定した要素の直下の子要素にだけCSSを適用する

指定した要素の直下の子要素にだけCSSを適用する

指定した要素の直下の子要素にだけCSSを適用するときのメモです。
今までは一箇所のためだけにclass名を付けたりしていました…。

以下のようなコードで「猫」の文字だけ赤色にしたい場合です。

うさぎ

今まではこうしていました。
この書き方だとコードがごちゃごちゃするのでやだなーと思っていました。。

うさぎ

.animals .love {
color: red;
}

以下のような書き方をすれば、class名を新たに設定しなくても「猫」の文字だけ赤色で表示することができます。

.animals > p {
color: red;
}

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事