CSS セレクタ・演算子・結合子、代表的な関数をまとめる

By /

まえがき

CSS関連を調べてるなかで理解してない部分あったのでまとめ。
めっちゃくちゃ基礎的な内容だけど、意外と「あ、それあんまりよくわかってなかったかも」
がなくなるといいな。

下記の内容を自分用にまとめたり、焼き回した内容です。
より正確・詳細な内容はリンク先を確認お願いします。

MDN Web Docs CSSセレクター

セレクター

ここは特に基本的な部分かも。
CSSが適用される要素を定義するものです。

ちなみに

メモ: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。

とMDNにありました通り自分と、その子要素を指定することは可能ですが
親要素を超えて指定することはできません。

全称セレクター

全ての要素を指定します。特定の名前空間に限定する構文も許可されてるみたいですが、名前空間に関しては
この記事では割愛します。

/* 全ての要素のfont-sizeを15pxに指定 */
* {
    font-size: 15px;
}

要素型セレクター

指定された要素を指定します。

/* p要素のpaddingを1emに指定 */
p {
    padding: 1em;
}

クラスセレクター

指定されたclass属性を持つ要素を指定します。

/* "content"クラスを持つ全ての要素のmargin-bottomを15pxに指定 */
.content {
    margin-bottom: 15px;
}
/* "menu"クラスを持つ全てのli要素にfont-size:15pxを指定 */
li.menu {
    font-size: 15px
}

IDセレクター

クラスセレクターのID版。使い方も同じ。
IDを持つ要素はHTML中１つしか存在しない。

/* "content"IDを持つ要素のmargin-bottomを15pxに指定 */
#main-content {
    margin-bottom: 15px;
}
/* "main-menu"IDを持つul要素にmargin-bottom:15pxを指定 */
/* この書き方はできるけど意味はないかも */
ul#main-menu {
    margin-bottom: 15px
}

属性セレクター

指定された属性をもつ要素全てを指定します。
属性セレクタは様々な構文が許可されているので参考リンク置いときます。
基本的には正規表現ライクな演算子が使えるみたい。

MDN 属性セレクター

/* title 属性を持つ <a> 要素 */
a[title] {
        color: purple;
}

/* href が "https://example.org" と一致する <a> 要素 */
a[href="https://example.org"] {
        color: green;
}

/* href に "example" を含む <a> 要素 */
a[href*="example"] {
        font-size: 2em;
}

/* href が "org" で終わる <a> 要素 */
a[href$=".org"] {
        font-style: italic;
}

セレクターリスト

前述したセレクターを複数指定してできます。

html,
body {
    font-size: 10px;
}

/* 複数の種類のセレクターを一括で指定してもOK */
#main,
.item,
table {
    font-weight: bold;
}

結合子

当記事のメインその１。すげー長くなりそうで少し疲れてきたけどがんばる。

子孫結合子

(空白)で宣言。第一要素の子孫に当たる要素を指定します。

子結合子

>で宣言。第一要素の直接の子に当たる要素を指定します。

子孫と子の違いのサンプル

See the Pen
Untitled by kken (@kentakomai)
on CodePen.

一般兄弟結合子

~で宣言。第一要素の兄弟(同じ親)である第二要素を指定します。

隣接兄弟結合子

+で宣言。第一要素の兄弟(同じ親)である直後の第二要素を指定します。

一般兄弟と隣接兄弟の違いのサンプル書きました。

See the Pen
Untitled by kken (@kentakomai)
on CodePen.

列結合子（試験運用)

ここはまだ仮実装的な感じで、ここに書いても即腐る可能性があるので、リンク置いときます。
(僕の手元のGoogle Chromeでも動いてませんでした。)

MDN 列結合子

疑似表記

クラスやID,属性でHTML上に明記されてる訳ではないものを指定するためのもの。
すごいいっぱいあるので、代表的なもの、僕が気になったものを中心に取り上げます。

擬似クラス

文章ツリーに含まれない状態情報によって要素を指定する

名前 対象
:active マウス押下時
:hover マウスオーバー時
:first-of-type 兄弟要素のうち、最初のもの
:last-of-type 兄弟要素のうち、最後のもの
:empty 子を持たない要素
:link 未訪問の要素。href属性をもつ要素に利用可能
:focus inputなどの要素が入力待機状態のとき
:not() 指定意外の要素 not(div)の構文
:target ページ内ジャンプした先の要素を指定
:visited 訪問済みリンクを指定
:only-child 兄弟要素がない要素を指定
:nth-of-type() 記述した順番の要素を指定 nth-of-type(1), nth-of-type(even)の構文
:nth-child() nth-of-typeと同じ使い方。記述した順番の子要素を指定

疑似クラスとそのサンプルは膨大なので、詳細はこちらから。
試験運用中の疑似クラスたくさんあって面白そう。

MDN 疑似クラス

疑似要素

文章ツリーに含まれていない要素を指定します。
::のあとに名前を記述します。

名前 対象
::after 指定した要素の最後の子要素として疑似要素を作成する
::before 指定した要素の最初の子要素として疑似要素を作成する
::first-line ブロックレベル要素の最初の行にのみ適用される
::first-letter ブロックレベル要素の最初の文字にのみ適用される

::beforeや::afterは特によく使われていますね。

MDN 疑似要素

（おまけ）関数表記法

調べてる過程で、かるく触れておこうと思ったので追記します。
もちろん、結構な数があるので全部じゃなく、気になったものを中心に取り上げます。

構文は以下

selector {
  property: functional-notation( [argument]? [, argument]! );
}

JavaScriptとかよく書く人は馴染み易いものも多いと思います。
モジュール？としてはmath,filter,font,shape,transform
があるみたいです。

attr()

選択された要素の属性の値を受け取って、CSS内で利用するための関数

[参考](https://developer.mozilla.org/ja/docs/Web/CSS/attr())

blur()

画像にガウシアンブラーをかける。filterプロパティに指定可能です。
他にもgrayscale()(白黒)とかopacity()(透明度)とかあります。

calc()

名前の通り、算術計算して結果を返してくれる関数。
calc(10px * 5)すると50px返してくれます。便利。

var()

カスタムプロパティを呼び出して利用することができる関数。
普段使ったことないけど、便利そう。

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

min(), max()など(math系)

どちらも複数の引数を取りそのうちから最小値、最大値を返してくれる関数。
UnityやThreeJSなど利用したことがある方にはおなじみの三角関数や自乗する関数も
あります。

transform系

translate(), translate3d(),rotate()など
こちらも3DCGや2Dアニメーションを触ったことがある方ならご存知の関数が多くあります。

transform、mathに関してはそれだけでかなり色々なことができて
サンプルの準備や理解が非常に大変なので、機会があれば個別で取り上げたいと思います。

あとがき

調べてる過程でcssにもnamespaceという一般的なプログラミング言語には大体ある概念があるんですが
所謂プログラミング言語のnamespaceみたいなフランクな使い方はまだっぽい？

サラっと見ただけでこれ書いてるので、なにかきっかけあったらもっと追っかけてみたいです。
(もちろんSASSのようなコンパイルしてCSSを出力するような言語ではサポートされてる)

MDN @namespace
Wikipedia SASS
Wikipedia LESS
Github css-modules

上部へスクロール