ここでは、普段あまり使わないけど、知っておくととても便利なセレクタの記載方法についてお話します。
コンテンツ
間接セレクタ要素1 ~ 要素2
間接セレクタは、「要素1」のあとに出現する「要素2」に対してデザインを適用させるセレクタです。このセレクタの適用範囲は、同じ階層の兄弟の要素たちです。間接セレクタの使い方としては、見出しの余白などによく使われていますね。
ボタンで表示を切り替えてご覧ください。
See the Pen General sibling01 by kenichi (@ken81) on CodePen.
このように単純に見出しをセレクタにしてmargin-topを指定しただけだと、一番最初の見出しの上の余白が大きくなりすぎてしまい不格好です。これを間接セレクタを使ってデザインするとこうなります。
See the Pen General sibling02 by kenichi (@ken81) on CodePen.
CSS
h2 {
margin-top: 0;
}
h2 ~ h2 {
margin-top:50px;
}
このように指定することで、h2の後、（つまり、２番目以降のh2）だけに余白を入れることが可能です。
もう少し高度な使い方としては、ラジオボタンを使ってタブを作成するときがあります。
See the Pen tabs01 by kenichi (@ken81) on CodePen.
#tab01:checked ~ #content01,
#tab02:checked ~ #content02,
#tab03:checked ~ #content03 {
display: block;
}
本来、ラジオボタンとは関係のないdiv要素を間接セレクタで紐付けることでタブの切替を実装しています。
直下セレクタ｜親要素 > 子要素
直下セレクタは、指定した子要素のみ（つまり、孫要素は除外）にデザインを適用させたいときに使うセレクタです。
私が一番よく使う場面は、グローバルナビゲーションの中でメインメニューとサブメニューのulタグが入れ子構造になっているような場合です。#global_nav ulと書いてしまうとサブメニューまでデザインが適用されてしまう。でも、メインメニューだけにデザインを適用させたいときに#global_nav > ulといった書き方をします。
使用例
#global_nav > ul {
display: flex;
margin: 0 auto;
max-width: 1000px;
height: 45px;
text-align: center;
}
隣接セレクタ｜要素１ + 要素２
隣接セレクタは、要素１ + 要素２という形で指定したときに、「要素１」に隣接した（直後の）「要素２」にデザインが適用されるセレクタです。先ほどの直下セレクタと違い、親子ではなく、隣接した兄弟である点に気をつけてください。
例えば、横に並んだメニューの境界線に線を入れたい場合にborder-left: 2px solid #999;と指定したとしましょう。
See the Pen p margin by kenichi (@ken81) on CodePen.
これだと一番左のボーダーが余計に入ってしまうため、これを削除するために、さらにfirst-childなどを使ってボーダーを消す必要があります。でも、隣接セレクタを使うともっとスマートな書き方になります。
See the Pen g-navi_02 by kenichi (@ken81) on CodePen.
CSS
.menu ul li + li{
border-left: 2px solid #999;
}
このように記載することで、左にli要素がある（隣接している）ものだけに適用されるので、一番左のli要素にはボーダーが入らなくなります。
否定擬似クラス要素:not(条件)
否定疑似クラスは、「条件」のところに擬似クラスや属性セレクタなどを指定して、その条件に該当する要素にはデザインを適用しないようにできるセレクタです。
これも先ほどのメニューの例で行きましょう。先ほどは、隣接セレクタで一番左のボーダーが表示されないようにしていましたが、否定疑似クラスを使って次のように記載することもできます。
See the Pen g-navi_03 by kenichi (@ken81) on CodePen.
CSS
.menu ul li:not(:first-child){
border-left: 2px solid #999;
}
このように記載することで、最初のli要素以外にデザインを適用させることができます。
空要素に適用されるempty擬似クラス
empty擬似クラスは、中身が空っぽである要素を指定できるセレクタです。
See the Pen empty by kenichi (@ken81) on CodePen.
これが一体、どんなときに役立つのかよく分かりませんが、いつか役に立つときが来るのでしょう。一応、覚えておきましょう。
最初の文字だけに適用させる要素:first-letter
要素:first-letterはテキストの一番最初の文字だけにデザインを適用させるセレクタです。これはよくこんな感じのデザインで使われていますね。
See the Pen :first-letter by kenichi (@ken81) on CodePen.
CSS
h2:first-letter{
font-size: 1.5em;
color: #7fc7f6;
}
最初の文字だけ大きくしたり、色を変える際に便利なセレクタです。
属性セレクタ
ここから先は、属性セレクタといわれる要素の属性に関するセレクタを紹介します。ところで、要素の「属性」って何だかご存知ですか？いまいち良く分からないという方には下記の記事がお役に立てると思います。
ある属性をもつ要素に適用させる要素[属性]
これは該当する属性をもつ要素のみにデザインを適用させるセレクタです。属性の値が何なのかは問いません。その属性があればOKです。今、パッとちょうど良い使い道が思いつかないのですが、普段、あまり使われない属性がある場合は、それをセレクタに利用するみたいな使い方が良いではないでしょうか。
属性と値が一致するときに適用させる[属性="値"]
これは属性と値が一致したときにデザインを適用させるというものです。よく使われるのは外部リンクのテキストの右側にアイコンを表示させるパターンですね。
See the Pen text_link by kenichi (@ken81) on CodePen.
a[target="_blank"]:afterという形でセレクタを指定することで、テキストリンクが外部リンクだった場合のみ右に外部リンクであることを示すアイコンフォントを表示させることができます。もうひとつ例をお見せします。
See the Pen search-box12 by kenichi (@ken81) on CodePen.
CSS
.search_container input[type="text"]{
border: none;
height: 2.0em;
background: #3879D9;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: FontAwesome;
font-size: 1.3em;
border: none;
background: none;
color: #fff;
position: absolute;
height: 2.5em;
right: 8px;
top: -10px;
outline : none;
}
これはinput要素に使われる属性と値の一致を利用してでデザインを組んでいる例です。このように要素特有の属性と値がある場合は、わざわざclass名を入れなくてもデザインを組むこともできます。
属性の値が特定の文字ではじまる場合に適用させる要素[属性名^="値"]
このセレクタは、class名などを同じ名前の連番で付けている場合に使えます。
See the Pen css03 by kenichi (@ken81) on CodePen.
CSS
div[class^="box"]{
border:2px solid #999;
}
このようにbox1～box5というクラス名の「box」という名前の共通点を利用して指定します。ただし、このセレクタで気をつける点がひとつあります。
See the Pen css04 by kenichi (@ken81) on CodePen.
上の例では、５番目のboxだけボーダーが適用されなくなっています。原因は、class名がclass="example box5"という形で複数指定されていて、しかも「box5」の方が後に記載されてしまっている点です。div[class^="box"]を適用させるためには、class="example box5"ではなくて、class="box5 example"という形で「box5」が先頭に来る必要があります。
属性の値が指定した文字で終わる場合に適用させる要素[属性名$="値"]
これは先ほどとは逆に指定した文字で終わる場合に適用させるセレクタです。
属性の値が指定した文字を含む場合に適用させる要素[属性*="値"]
先頭とか後ろとか関係なく、とにかく指定した文字を含むものに適用させるセレクタです。
属性が特定の値を持たない場合に適用させる[属性!="値"]
これは否定形のセレクタですね。私はまだ、これを使う場面に遭遇したことがないので、うまい使い道をお見せできないのが残念ですが、何かの機会にとても役に立ちそうです。
以上が普段あまり使わないけど、知っておくととても便利なセレクタでした。良かったら下記の記事も合わせて参考にしてみて下さい。
