10年以上WEB系の仕事をしていて、今日初めて「:target」セレクタについて知ったので、個人的な感動を記録に残してみました。
CSS3で定義されている内容なので、既知の方も多いはずです。なぜ、専門家を自負する自分が今まで「:target」セレクタの存在を知らなかったかを考えてみると、対象要素にJavaScriptでクラスを付与する事で実現できていたからかと思われる。jQueryを遣えば、20文字程度の処理で簡単にクラスの操作ができるので、これ自体に不便を感じず、他の方法を模索してこなかったのが大きな原因と思われる。
今回、ネット上のブログ記事で紹介されていた「CSSだけで作ってみた」系のネタの中でも、おっと思ったものがあったのをきっかけに調べて、「:target」セレクタについてたどり着いたといいう経緯です。
「:target」セレクタとは、「疑似クラスの一種で、 リンクのターゲット先となるE要素にスタイルを適用する際に使用します」とのことです。
<a href="#alpha">Alpha</a> <a href="#beta">Beta</a> <div id="alpha"> <p>初期の背景は透明です</p> </div> <div id="beta"> <p>初期の背景は透明です</p> </div>
:target {
background-color: #3A87AD;
}
要は、ページ内のアンカーリンクを使ってクリックされたセクションにスタイルを適用するというものです。おそらく想定としては、クリックされたエリアを目立たせたりというものだと思うのですが、クリックしたらスタイルを適用するという特性を使うと、様々なものに活用できそうです。
「:target」セレクタを使ってタブの「z-index」の値を制御して、最前面にくるコンテンツをコントロールしています。
.tab-content {
position: relative;
width: 300px;
height: 150px;
margin-top: 30px;
}
.tab-content > .tab-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF !important;
border: 1px solid #EEE;
padding: 10px;
}
.tab-content > .tab-wrapper > a[href^='#tab'] {
position: absolute;
top: -30px;
display: block;
width: 80px;
height: 30px;
line-height: 30px;
background-color: #EEE;
border-radius: 5px 5px 0 0;
text-decoration: none !important;
text-align: center;
}
.tab-content > .tab-wrapper:nth-child(1) {
z-index: 300;
}
.tab-content > .tab-wrapper:nth-child(2) {
z-index: 200;
}
.tab-content > .tab-wrapper:nth-child(3) {
z-index: 100;
}
.tab-content > .tab-wrapper:target {
z-index: 1000;
}
.tab-content > .tab-wrapper:nth-child(1) > a[href^='#tab'] {
left: 0px;
}
.tab-content > .tab-wrapper:nth-child(2) > a[href^='#tab'] {
left: 85px;
}
.tab-content > .tab-wrapper:nth-child(3) > a[href^='#tab'] {
left: 170px;
}
.tab-content > .tab-wrapper > a[href^='#tab']:hover,
.tab-content > .tab-wrapper:target > a[href^='#tab'] {
color: #FFF;
background-color: #CCC;
}