ブログ

> ブログ > お仕事 > CSSのセレクタのおさらい
お仕事

CSSのセレクタのおさらい

こんにちは、うるしです。
皆さまGWはいかがお過ごしでしょうか。
今日は雨ですね。お天気回復すると良いのですが。

さて、私はGW中お出かけの予定もないので、CSSの話でもしましょう。
WEBに不可欠なCSSですが、最初に覚えた方法だけでもやっていけるもので、便利な方法を使っていなかったりするものです。
私は空白でつなぐ子孫セレクタばかり使っていて、最近になって他の方法も使うようになりました。
基本的なものですが、おさらいがてらご紹介します。

隣接セレクタ

セレクタA + セレクタB
セレクタAとセレクタBが同じ親を持ち、セレクタAの直後あるセレクタBにのみ適用されます。

下記のように使えば、1行目は罫線なしで、2行目から上部に罫線が引かれます。

li + li {
border-top: solid 1px #000;
}

子セレクタ

セレクタA > セレクタB
セレクタAの子要素であるセレクタBにのみ適用されます。
孫要素には適用されません。

下記の例だと、p の直下の strong は赤になりますが、p と strong の間に span があって孫になってしまう場合には適用されません。

p > strong {
color: #F00;
}

間接セレクタ

セレクタA ~ セレクタB
セレクタAと同じ親要素に属する後続に出現するセレクタBに適用されます。

親子、孫、という階層は頻繁に考えますが、「後続に出現するセレクタ」とは、そういうセレクタもあったのねと思いました。

WEBに携わる方々には、独学で学んできた方も多いと思います。
新しい方法も追いかけなければなりませんが、時々基本を振り返り自分のやり方を見直してみてはいかがでしょう。