17. Selectors — Learn web development | MDN

Tatsuya Asami

8 min readJul 18, 2018

【所要時間】

1時間46分(2018年7月18日)

【概要】

・CSSセレクタについて学ぶ。

【要約・学んだこと】

The basics

セレクタはCSS ruleの一部で、CSS declaration blockの前に位置する。

Different types of selectors
セレクタはこれらのカテゴリーに分類できる。

・Simple selectors:

elementのタイプ、class, idに基づき、1つ以上のelementを照合する。
e.g.)

/* All p, ui, li elements are red */
p, ui, li {
  color: red;
}

コンマで複数のelementを選択できる。

Class selectors

<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>

HTMLで”first” “second” “done”というクラスを作る。

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

“ .+class ”でCSSを適用するクラスを指定できる。

ID selectors

<p id="rude"> — "Go away!"</p>

HTMLでrudeというidをつけると、rude idのみ下記のCSSが適用される。

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

”#+id”でCSSを適用するidを指定できる。

・Universal selector

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

“*”でページ内の全ての要素に適用できる。

・Attribute selectors:

attributeやattribute valuesにもとづいて、1つ以上のelementを照合する。attribute selectorsは、Presence and value attribute selectorsとSubstring value attribute selectorsに分類できる。

Presence and value attribute selectors

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

[data-vegetable=”liquid”]: attributeがdata-vegetableかつ、valueがliquidのelement全てにCSSを適用する。

[data-vegetable~=”spicy”]: attributeがdata-vegetableかつ、spicyがdata-vegetableのvalueに含まれるスペースで区切られた単語の１つであるelement全てにCSSを適用する。

Substring value attribute selectors

/* Classic usage for language selection */
[lang|="fr"] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the substring "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

[lang|=”fr”]:attributeがlang valueがfrまたはfr−(ダッシュ)で始まるのelement全てにCSSを適用する。
|が^になるとfrから始まるvalue
$になるとfrで終わるvalue
*になるとfrを含むvalue

のように指定できる。

Pseudo-classes:

pseudo-classはセレクタの最後に : を置くことで、キーワードを追加できる。マウスオーバーで浮き上がるelementが存在するときや、使用できなかったりチェックされたチャットボックスや、DOMツリーの最初の子elementが存在する時に、１つ以上のelementを照合する。

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

Pseudo-elements:

:: をセレクタの最後に加えることで、特定のelmenetを選ぶことができる。elementに関連するある位置にあるコンテンツの1つ以上の部分を照合する。e. g.) それぞれのパラグラフの最初の単語や、elementの直前に現れるように作られたコンテンツなど。

/* All elements with an attribute "href" with values
   starting with "http" will have an arrow added after their
   content (to indicate they are external links) */
[href^=http]::after {
  content: '⤴';
}

Combinators:

正確にはselector自体ではないが、特定の選択肢を有益にする2つ以上のセレクタを組み合わせる方法のこと。e. g.) divの直接の子孫であるパラグラフや、headingsの直後にあるパラグラフのみを選ぶことができる。

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}
/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

Multiple selectors:

同じCSS rule上にコンマを使っていくつかのセレクタを置くことができる。それらのセレクタで、選択された全てのelementに1セットのdeclarationsを適用することができる。

Selectors article overview

これらからセレクタのことが詳しく学べる。

【わからなかったこと】

・全体的にセレクタの定義がわからなかったが、例を見たらどういうことかわかった。

【感想】

・今までもあったが、定義を読んでもよくわからない時は、サンプルを先に見た方が理解が早い。