ブログ

自分のための備忘録として、CSSセレクターについてまとめておきます。

基本セレクター

• 全称セレクター
  • すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
  • 構文: * ns|* |
  • 例: * は文書のすべての要素を選択します。
  • つまり、そのページの全部にCSSをつけられる。

* {
  color: red;
}

• 要素型セレクター
  • 指定されたノード名を持つすべての要素を選択します。
  • 構文: elementname
  • 例: input はあらゆる <input> 要素を選択します。
  • つまり、タグ単位でCSSをつけられる。

input {
  color: red;
}

• クラスセレクター
  • 指定された class 属性を持つすべての要素を選択します。
  • 構文: .classname
  • 例: .index は “index” クラスを持つあらゆる要素を選択します。
  • よく見るCSSの付け方。

.classname {
  color: red;
}

• ID セレクター
  • id 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は 1 つしかないはずです。
  • 構文: #idname
  • 例: #toc は “toc” という ID を持つ要素を選択します。
  • JavaScriptなどでCSSを利用する際によく見る印象。

#idname {
  color: red;
}

• 属性セレクター
  • 指定された属性を持つ要素をすべて選択します。
  • 構文: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
  • 例: [autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択します。
  • 細かい条件付けの際に便利。

a[href*="sample"] {
  color: red;
}

グループ化セレクター

• セレクターリスト
  • , はグループ化の手段であり、一致するすべてのノードを選択します。
  • 構文: A, B
  • 例: div, span は <span> と <div> の両要素に一致します。
  • 複数のクラスやタグで同じCSSの中身をつける際にまとめて記述することでコードを短縮できるし、修正の時も１箇所で済むから便利。

div, span {
  color: red;
}

結合子

• 子孫結合子
  • (空白) 結合子は、第 1 の要素の子孫にあたるノードを選択します。
  • 構文: A B
  • 例: div span は <div> 要素の中にある <span> 要素をすべて選択します。
  • スペースで結合する。特定の要素の子要素に対してCSSをつける際に使用する。

div span {
  color:red;
}

• 子結合子
  • > 結合子は、第 1 の要素の直接の子に当たるノードを選択します。
  • 構文: A > B
  • 例: ul > li は <ul> 要素の内側に直接ネストされた <li> 要素をすべて選択します。
  • 特定の要素の1階層下の子要素にのみCSSをつける際に使用する。

ul > li {
 color: red;
}

• 一般兄弟結合子
  • ~ 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。
  • 構文: A ~ B
  • 例: p ~ span は <p> 要素の後にある <span> 要素を全て選択します。
  • 個人的にあまり使わないイメージ。

p ~ span {
  color: red;
}

• 隣接兄弟結合子
  • + 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。
  • 構文: A + B
  • 例: h2 + p は <h2> 要素の後にすぐに続く <p> 要素をすべて選択します。
  • 個人的にあまり使わないイメージ。

h2 + p {
  color: red;
}

• 列結合子 Experimental
  • || 結合子は列に所属するノードを選択します。
  • 構文: A || B
  • 例: col || td は <col> 要素のスコープに所属するすべての <td> 要素を選択します。
  • 個人的にあまり使わないイメージ。

col || td {
  color: red;
}

擬似表記

• 擬似クラス
  • : 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
  • 例: a:visited はユーザーが訪問済みの <a> 要素をすべて選択します。
  • hoverやcheckedなど特定の状態でCSSをつける際に使用する。

a:hover {
  color: red;
}

• 擬似要素
  • :: 表記は、 HTML に含まれていないエンティティを表現します。
  • 例: p::first-line はすべての <p> 要素の先頭行を選択します。
  • afterやbeforeなど割と限定的な状況で使うイメージ。

p::first-line {
  color: red;
}

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！