[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素

Post on:2015年8月7日

CSS3のセレクタには便利なものがたくさんあり、複雑なHTMLやJavaScriptを使用しなければ実現できなかったことが非常に簡単なコードで実装できます。
Webページでよく利用されるテクニックに役立つ便利な5つの疑似クラスと疑似要素を紹介します。

サイトのキャプチャ

5 Lesser Used CSS Selectors

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

疑似クラス・と疑似要素を使おう

もしあなたがCSSの新入生なら、あなたが使うセレクタはおそらくclassやidや要素名がほとんどでしょう。実はCSSで利用できるセレクタは、38種類あります（参考: Selector Index -W3C)。

38種類のセレクタの中から、特に便利な5つの疑似クラス・と疑似要素とその使用例を紹介します。

疑似クラスの一覧
E:empty
子をもっていない空のE要素
E::first-letter, E::first-line
E要素の最初の文字(letter）と最初の行(line)
E:not(セレクタ)
「セレクタ」と一致しないE要素
E:lang(言語コード)
言語コードが「言語コード」のE要素
E:target
アンカーリンク先のE要素

ブラウザのサポート状況

E:empty

:empty疑似クラスは子をまったくもっていない空のE要素を表します。
空というのは文字通り何もない状態で、空白スペース、空の子要素、テキストなどのデータが含まれていてはダメです。HTMLのコメントは空の状態として認識されます。

<!-- 子をまったくもっていない空の状態 -->
<div></div>
<div><!-- comment --></div>

<!-- これは空の状態ではありません -->
<div>foo</div>
<div>  </div>
<div><span></span></div>
<div>  <!-- comment -->  </div>

:empty疑似クラスは、要素の中にコンテンツを持っているかどうかに関わらずスタイルを定義しておく時に役立ちます。

例えば、メッセージを生成するボックスです。このボックスは特定の状況で表示され、メッセージがダイナミックに生成されたり、メッセージが無い場合もあります。メッセージがある場合は通常通りのスタイルシートで表示され、メッセージがない場合は:empty疑似クラスを使い「display: none;」で非表示にすることができます。

.alert {
  background-color: beige;
  border: 2px solid rgb(150, 150, 150);
  border-radius: 5px;
  padding: 5px 10px;
  display: inline-block;	
}

.alert:empty {
  display: none;
}

メッセージ有りはスタイルを適用、メッセージ無しで:emptyを使わないとゴミみたいなのが、:emptyを使うと非表示に。

サンプルのキャプチャ

E::first-letter, E::first-line

::first-letter疑似要素はE要素の最初の文字、::first-line疑似要素はE要素の最初の行を表します。特に::first-lineがレスポンシブであるということは、非常に便利です。ビューポートのサイズを変え、最初の行の文字量がそれに合わせて増減しても、最初の行だけにスタイルが適用されます。

これは記事のスタイルを整える時に特に有用で、例えばこんな感じです。

article::first-letter {
  font-size: 8rem;
  line-height: 1;
  float: left;
  padding-right: 1rem;			
  margin-top: -2rem;
}

article::first-line {
  font-size: 3rem;
}

最初の文字と最初の行にそれぞれスタイルを適用します。
表示サイズが変更されてもレスポンシブ対応なので、一行の文字数が変わっても::first-lineが適用されるのは最初の一行目です。

サンプルのキャプチャ

E:not(セレクタ)

:not疑似クラスは指定したセレクタと一致しないすべてのE要素を表します。このことはCSSで通常はスタイルに優先するように指定しなければならないのを避けるのに極めて有用です。

例えば、基本的にはリンクにアンダーラインをつけ、一部のリンクにはつけない場合、通常は下記のCSSを用意するでしょう。

a {
  text-decoration: underline;
}
a.no-underline {
  text-decoration: none;
}

この記述が意味するのは、「.no-underline」のリンクが不必要に適用されたデフォルトのスタイルを持っているということです。
:not疑似クラスを使い、この余分な宣言を避けることができます。

a:not(.no-underline) {
  text-decoration: underline;
}
a.no-underline {
  text-decoration: none;
}

同様に、このセレクタをうまく使う例があります。

E:lang(言語コード)

:lang疑似クラスは指定された言語に定義されたE要素を表します。この疑似クラスを使用すると、多くのことができます。

1. 情報とスタイルを加える

異なる言語ごとに、セクションに役立つ情報を加えたり、セクションをスタイルすることができます。

*:lang(de) {
  border-left: 4px solid #FFCE00;
  padding-left: 1rem;
}

*:lang(de):before {
  content: "DE";
  position: absolute;
  top: 0;
  left: -55px;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 10px 0;
  border-radius: 50%;
  background-color: #FFCE00;
}
サンプルのキャプチャ

2. 言語にあった記号を使う

言語が異なるとその引用符も異なります。:lang疑似クラスを使うことで、適切な引用符を使用することが可能です。

blockquote:before {
  content: open-quote;
  padding-right: 1rem;
}

blockquote:after {
  content: close-quote;
  padding-left: 1rem;
}

blockquote:lang(fr) {
  quotes: '«' '»';
}

blockquote:lang(zh-Hans) {
  quotes: '「' '」';
}
サンプルのキャプチャ

3. 言語にあったフォントを使う

言語に適したフォントあるいはスタイルを適用することもできます。例えば日本語では強調のために斜体を使用するのは適切ではありません。下記のように日本語以外は斜体、日本語の時だけ傍点を適用することもできます。

em:not(lang(ja)) { 
  font-style: italic; 
}

em:lang(ja) { 
  font-style: normal; 
  -webkit-text-emphasis-style: dot;
  text-emphasis-style: dot;
  text‑emphasis‑position: over right; 
}
サンプルのキャプチャ

E:target

:target疑似クラスは、ターゲットとなるアンカーリンク先のE要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。

:target疑似要素を使うと、ターゲットとなるセクションにスタイルを適用することができます。

:target {
  border-left: 4px solid rgb(200, 200, 200);
  padding-left: 1rem;
}

3番目でも5番目でも何番目でもターゲットとなった時にスタイルが適用されます。

サンプルのキャプチャ

ここで掲載した疑似クラスのサンプルは、下記でコードをダウンロードできます。

サイトのキャプチャ

5 Lesser Used CSS Selectors

sponsors

top of page

©2024 coliss