CSS
セレクタ

前書き

構文

• ＃id
• 。 クラス名
• ： 擬似クラス名
• :: pseudo-elementname
• [ attr ] / *にはattr属性があります。 * /
• [ attr = " value "] / *はattr属性を持ち、その値は正確に " value "です。 * /
• [ attr〜 = " value "] / *はattr属性を持ち、その値は空白で分割されたときに " value "を含みます 。 * /
• [ attr | = " value "] / *はattr属性を持ち、その値は正確に " value "であるか 、値は " value - "で始まります。 * /
• [ attr ^ = " value "] / *はattr属性を持ち、その値は " value "で始まります 。 * /
• [ attr $ = " value "] / *はattr属性を持ち、その値は " value "で終わります 。 * /
• [ attr * = " value "] / *はattr属性を持ち、その値には " value "が含まれています 。 * /
• 要素名
• *

備考

属性セレクタ

概要

アトリビュートセレクタは、選択基準をそれに応じて変更するさまざまなタイプの演算子で使用できます。指定された属性または属性値の存在を使用して要素を選択します。

ノート：

1. 属性値は、一重引用符または二重引用符で囲むことができます。引用符は一切使わないかもしれませんが、CSS標準によれば有効ではありませんので、お勧めしません。

2. 個別のモジュールに分割されているため、統合された単一のCSS4仕様はありません。しかし、 "レベル4"モジュールがあります。 ブラウザーのサポートを参照してください 。

詳細

[attribute]

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

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

JSBinのライブデモ

[attribute="value"]

指定された属性と値を持つ要素を選択します。

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

JSBinのライブデモ

[attribute*="value"]

指定された属性および値を持つ要素を選択します。指定された属性には、指定された値がどこでも（部分文字列として）含まれます。

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

JSBinのライブデモ

[attribute~="value"]

与えられた値が空白で区切られたリストに現れる、与えられた属性と値を持つ要素を選択します。

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

JSBinのライブデモ

[attribute^="value"]

指定された属性が値で始まる、指定された属性と値を持つ要素を選択します。

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

JSBinのライブデモ

[attribute$="value"]

指定された属性が指定された値で終わる、指定された属性と値を持つ要素を選択します。

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

JSBinのライブデモ

[attribute|="value"]

指定された属性と値を持つ要素を選択します。属性の値が指定された値または正確に指定された値の場合、 - （U + 002D）

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

JSBinのライブデモ

[attribute="value" i]

与えられた属性と値を持つ要素を選択します。属性の値は、 Value 、 VALUE 、 vAlUeまたはその他の大文字と小文字を区別しない可能性として表すことができます。

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

JSBinのライブデモ

属性セレクタの特異性

0-1-0

クラスセレクタおよび疑似クラスと同じです。

*[type=checkbox] // 0-1-0

これは、属性セレクタを使用して、 IDセレクタで選択された場合よりも低い特異性でIDで要素を選択できることに注意してください。 [id="my-ID"]は#my-IDは低いが特異性は低い。

詳細については、「 構文セクション 」を参照してください。

コンビネーション

概要

注：兄弟セレクタは、ソースドキュメント内の要素の後ろにある要素を対象とします。 CSSはその性質上（カスケード）、 前または親要素を対象とすることはできません。ただし、flex orderプロパティを使用すると、以前の兄弟セレクタをビジュアルメディアでシミュレートできます 。

Descendant Combinator： selector selector

少なくとも1つのスペース文字で表される子孫コンビネータ ）は、定義された要素の子孫である要素を選択します。このコンビネータは、要素のすべての子孫を（下の子要素から）選択します。

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

JSBinのライブデモ

上記の例では、最初の2つの<p>要素は両方とも<div>子孫であるため選択されています。

子コンバイナ： selector > selector

子（ > ）コンビネータは、指定された要素の子 、または直接の子孫である要素を、選択するために使用されます。

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

JSBinのライブデモ

上記のCSSは<div>から直接派生した唯一の段落であるため、最初の<p>要素のみを選択します。

2番目の<p>要素は<div>直接の子ではないため選択されません。

隣接する兄弟結合子： selector + selector

隣接する兄弟（ + ）結合子は、指定された要素の直後にある兄弟要素を選択します。

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

JSBinのライブデモ

上記の例では、別の<p>要素の直前にある<p>要素のみを選択しています。

一般的な兄弟結合子： selector ~ selector

一般的な兄弟（ ~ ）結合子は、指定された要素に続くすべての兄弟を選択します。

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

JSBinのライブデモ

上記の例では、すぐ隣にあるかどうかにかかわらず、別の<p>要素で始まるすべての<p>要素を選択しています。

クラス名セレクタ

クラス名セレクタは、対象のクラス名を持つすべての要素を選択します。たとえば、クラス名.warningは次の<div>要素を選択します。

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

クラス名とターゲット要素をより具体的に組み合わせることもできます。上記の例を基に、より複雑なクラス選択を紹介しましょう。

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

この例では、とのすべての要素.warningクラスは青色のテキストの色を有することになる、と要素.important持つクラスは、オレンジ色のテキストの色を有し、 両方持っている全ての要素.importantと.warningクラス名は赤色のテキストを持っています色。

CSS内では、 .warning.important宣言に2つのクラス名の間にスペースが含まれていなかったことに注意してください。つまり、 class属性にwarningとimportant両方のクラス名を含む要素のみが検索されます。これらのクラス名は、要素上の任意の順序で指定できます。

スペースはCSS宣言の二つのクラスの間に含まれていた場合、それだけで、親要素の持つ要素を選択します.warning持つクラス名と子要素.importantクラス名を。

IDセレクタ

IDセレクタは、ターゲットIDを持つDOM要素を選択します。 CSSの特定のIDで要素を選択するには、 #接頭辞が使用されます。

たとえば、次のHTML div要素...

<div id="exampleID">
    <p>Example</p>
</div>

...はCSSの#exampleIDで次のように選択できます：

#exampleID {
    width: 20px;
}

注 ：HTML仕様では、同じIDを持つ複数の要素を使用できません

擬似クラス

擬似クラスは、文書ツリーの外部にある情報、または他のセレクタやコンビネータでは表現できない情報に基づいて選択できるキーワードです。この情報は、特定の状態（ 状態および動的擬似クラス）、場所（ 構造およびターゲット擬似クラス）、前者（ 否定擬似クラス）または言語（ lang擬似クラス）の否定に関連付けることができます。例としては、リンクがたどられた（ :visited ）か、マウスが要素（ :hover ）の上にあるか、チェックボックスがチェックされた（ :checked ）かなどが含まれ:checked 。

構文

selector:pseudo-class { 
    property: value;
}

疑似クラスのリスト：

:visited pseudoclassは、セキュリティホールであるため、多くの最新のブラウザではほとんどのスタイリングには使用できません。参考までにこのリンクを参照してください。

基本セレクタ

注意： IDの値は、Webページ内で一意である必要があります。同じ文書ツリー内でIDの値を複数回使用することは、 HTML標準に違反しています 。

セレクタの完全なリストは、 CSSセレクタレベル3仕様書にあります。

範囲入力をスタイルする方法

HTML

<input type="range"></input>

CSS

チェックボックス付きグローバルブール：チェックし、〜（一般兄弟コンビネータ）

〜セレクタを使用すると、JavaScriptを使用せずにグローバルにアクセス可能なブール値を簡単に実装できます。

booleanをチェックボックスとして追加

ドキュメントの最初に、一意のidとhidden属性セットを使用して、必要なブール値を追加します。

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

ブール値を変更する

ブール値を切り替えるには、 for属性を設定したlabelを追加forます。

<label for="sidebarShown">Show/Hide the sidebar!</label>

CSSでブール値にアクセスする

通常のセレクタ（ .color-red ）は、デフォルトのプロパティを指定します。 true / falseセレクタに従うことでオーバーライドできます：

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

<checkbox> 、 [sibling ...] 、および<target>は適切なセレクタに置き換えてください。 [sibling ...]あなたは怠け者が多い場合）、単に、特定のセレクタ可能*ターゲットがすでにチェックボックスの兄弟である場合または何も。

上記のHTML構造の例は次のとおりです。

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

行動中

これらのグローバルブール値の実装については、 このフィドルを参照してください。

CSS3：範囲内セレクタの例

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

:in-range CSS擬似クラスは、要素がその要素の指定された範囲の制限内のvalue属性を持つ場合に一致します。これにより、要素を使用して現在定義されている値が範囲の制限内にあるというフィードバックがページに表示されます。 [1]

子擬似クラス

"：nth-​​child（an + b）CSS擬似クラスは、ドキュメントツリーの前に+ b-1の兄弟を持つ要素をn"の所与の正または0の値にマッチさせます。 - MDN：nth-​​child

IDセレクタの高い特異性なしにIDを使用してエレメントを選択する

このトリックは、IDセレクターの高い特異性を避けるために、属性セレクターの値としてIDを使用してエレメントを選択するのに役立ちます。

HTML：

<div id="element">...</div>  

CSS

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

A.：疑似クラスの例ではなく＆B：CSS内の疑似クラス内のフォーカス

A.構文は上記のとおりです。

次のセレクタは、すべての一致する<input>無効化されていないとクラスがありませんHTMLドキュメント内の要素.example ：

HTML：

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS：

input:not([disabled]):not(.example){
   background-color: #ccc;
}

:not()擬似クラスはセレクタレベル4でカンマ区切りのセレクタもサポートします：

CSS：

input:not([disabled], .example){
   background-color: #ccc;
}

JSBinのライブデモ

ここで背景の構文を参照してください。

B.フォーカス：CSS内の擬似クラス

HTML：

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS：

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

The：only-child擬似クラスセレクタの例

:only-child CSS擬似クラスは、その親の唯一の子である要素を表します。

HTML：

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

CSS：

p:only-child {
  color: blue;
}

上記の例では、親から一意の子である<p>要素を選択しています。この場合は<div>です。

JSBinのライブデモ

最後の型のセレクタ

:last-of-typeは、その親の特定の型の最後の子である要素を選択します。下の例では、cssは最後の段落と最後の見出しh1ます。

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle