覚えておく必要のある30のCSSセレクター

30 Css Selectors You Must Remember

それで、基本的なID、クラス、および子孫セレクターを学び、それからそれらをずっと使用してきましたか？もしそうなら、あなたは多くの柔軟性（css）を失います。この記事で言及されているセレクターの多くはCSS3仕様の一部であるため、最新のブラウザーでのみ使用できます。

1. *

* { margin: 0 padding: 0 }

初心者の場合、より高度なセレクターを学ぶ前に最初に知っておくべきこと。

アスタリスクセレクターは、ページ内のすべての要素に一致します。多くの開発者は、この手法を使用してマージンとパディングをゼロにリセットします。これはすばやくテストするときに非常に便利ですが、本番コードでは絶対に使用しないことをお勧めします。それはブラウザに多くの不必要な負担をかけます。

※サブセレクターとしても使用できます。

#container * { border: 1px solid black } 

これは、＃containerdivの各子孫要素と一致します。繰り返しますが、この手法を使用しないようにしてください。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

2.＃X

#container { width: 960px margin: auto } 

ポンド記号のプレフィックスを使用すると、IDを選択できます。これは最も一般的な使用法ですが、IDセレクターの使用には注意が必要です。

繰り返し自問してみてください。選択したい要素と一致するIDが必要ですか？

IDセレクターは一意であり、再利用することはできません。可能であれば、タグ名、新しいHTML5要素、または疑似クラスを使用してみてください。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

3. .X

.error { color: red }

クラスセレクターが導入されました。 idとclassの違いは、後者は複数回使用できることです。要素のセットにスタイルを適用する場合は、クラスセレクターを使用できます。また、特別な要素にスタイルを適用する場合は、idを使用します。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

4. X Y

li a { text-decoration: none }

次に一般的なセレクターは子孫セレクターです。セレクターに専門性を追加する必要がある場合に使用できます。たとえば、順序付けされていないリストの下のアンカー要素のみを照合する場合はどうでしょうか。この時点で、子孫の選択が役立ちます。

ヒント-セレクターがこのXY Z A B.errorのように見える場合は、間違っています。この高重量を使用する必要があるかどうかを常に自問してください。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

5. X

a { color: red } ul { margin-left: 0 } 

IDやクラス名ではなく、タイプに応じて、ページ上のすべての要素を一致させたい場合はどうすればよいですか？もちろん、タイプセレクターを使用してください。順序付けされていないリストをすべて選択する必要がある場合は、ul {}を使用します。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

6. X：visitedおよびX：link

a:link { color: red } a:visted { color: purple } 

：link疑似クラスセレクターを使用して、クリックされたすべてのアンカータグを選択します。

さらに、訪問済みの疑似クラスセレクターもあります。これにより、ご想像のとおり、ページ上でクリックまたはアクセスされたアンカータグにのみスタイルを適用できます。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

7. X + Y

ul + p { color: red } 

これは隣接セレクターと呼ばれます。 X要素の直後のY要素のみを選択します。上記の例では、各ulの後の最初の段落要素のテキストのみが赤で表示されます。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

8. X> Y

div#container > ul { border: 1px solid black } 

XYとX> Yの違いは、後者は直接の子のみを選択することです。たとえば、次のタグについて考えてみます。

<div id='container'> <ul> <li> List Item <ul> <li> Child li> ul> li> <li> List Item li> <li> List Item li> <li> List Item li> ul> div> 

セレクター#container> ulは、IDがコンテナーであるdivの直接の子ulのみを選択します。それはより深い李の子孫のulと一致しません。

したがって、子セレクターを使用すると、パフォーマンス上の利点があります。実際、これはcssセレクターに基づくjavascriptエンジンにも当てはまります。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

9. X〜Y

ul ~ p { color: red } 

これはX + Yと同じですが、制約はありません。兄弟セレクターは、前のセレクターの後の最初の要素のみを選択する隣接セレクター（ul + li）よりも幅が広くなっています。上記の例では、ulの背後にあるp要素のいずれかを選択します。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

10. X [タイトル]

a[title] { color: green } 

上記の例では、プロパティセレクターと呼ばれ、これはtitle属性を持つアンカータグのみを選択します。この属性のないアンカータグは画像化されません。しかし、より多くの機能が必要な場合はどうなりますか？ハハ……

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

11. X [href = 'foo']

a[href='http://net.tutsplus.com'] { color: #1f6053 /* nettuts green */ } 

上記のコードスニペットは、すべてのhref属性を次のように提供します。http://net.tutsplus.comアンカータグは、ブランドグリーンとして表示されるスタイルを追加します。他のすべてのアンカータグは影響を受けません。

href値を引用符で囲むことに注意してください。 javascript cssセレクターエンジンを使用するときは、これを忘れずに行ってください。可能であれば、非公式の方法の代わりにcss3セレクターを使用してください。

これは非常にうまく機能しますが、柔軟性が少し劣ります。リンクがNettus +に直接接続しているが、パスがnettustへの相対パスである可能性がある場合はどうでしょうか。この場合、少し正規表現の構文を使用できます。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

12. X [href * = 'nettuts']

a[href*='tuts'] { color: #1f6053 /* nettuts green */ } 

そうではありません〜これが必要なコードです。 *記号は、この属性を含む値に定義済みの値が含まれている必要があることを指定します。つまり、このコードには、nettuts.com、net.tutsplus.com、またはtutsplus.comのhref値が含まれています。
アンカータグがEnvatoではないtutsとの接続にリンクされている場合（tutsplusはEnvatoのWebサイトに属しています）、この説明が広すぎることを覚えていますか？したがって、文字列の開始と終了を制限するために^と＆の使用を制限するためのより多くの機能が必要です。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

13. X [href ^ = 'http']

a[href^='http'] { background: url(path/to/external/icon.png) no-repeat padding-left: 10px } 

一部のWebサイトがアイコンへのリンクをどのように定義しているかについて考えたことはありますか？あなたはそれを見たと確信しています。これらのリンクを使用すると、別のWebサイトに簡単にジャンプできます。
多くの場合、^（カラット）文字を使用するのは簡単です。この記号は、多くの場合、正規表現の文字列の始まりを表します。 「http」で始まるすべての「href」属性のアンカーをポイントする場合は、上記のようなコードを使用できます。

「http：//」を検索する必要はありません。https：//で始まるリンクも含める必要があるため、完全に不要です。

画像にリンクするすべてのリンクのスタイルを定義したい場合はどうなりますか？この場合、代わりに文字列の末尾を検索する必要があります。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

14. X [href $ = '。jpg']

a[href$='.jpg'] { color: red } 

ここでも、文字列の終了タグとして正規表現記号$（dolor）を使用します。この場合、URLが.jpgで終わるアンカーを検索します。この場合、gifおよびpng画像は選択されないことに注意してください。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

15. X [data- * = 'foo']

a[data-filetype='image'] { color: red } 

最近のものを振り返ると、png、jpeg、jpg、gifなどのさまざまな画像タイプをどのように含めることができますか？代わりに、次のように複数のセレクターを渡すことができると考えるのは簡単です。

a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png'], a[href$='.gif'] { color: red } 

ただし、これは非常に苦痛であり、非常に非効率的です。別の解決策は、カスタム属性を使用することです。画像にリンクする各アンカーに独自のdata-filetype属性を追加するとどうなりますか？

 <a href='path/to/image.jpg' data-filetype='image'> Image Link a> 

これがリンクされると、標準のプロパティセレクターを使用してこれらのリンクを指定できます。見下ろす：

a[data-filetype='image'] { color: red }

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

16. X [foo〜 = 'bar']

 a[data-info~='external'] { color: red } a[data-info~='image'] { border: 1px solid black } 

ここにはあまり知られていない特別なスキルがあり、間違いなくあなたを感動させます。 〜（tilda）、複数の値を持つスペースで区切られた属性の要素を指すのに役立ちます（実際には、この翻訳は理解できません、レベルの問題）
第15条のカスタム属性を例にとると、上記のコードでは、スペースで区切られた複数の値を定義するdata-info属性を作成しました。したがって、リンク自体はアイコンであり、このように画像リンクを指します。

<a href='path/to/image.jpg' data-info='external image'> Click Me, Fool a> 

このような適切なマークアップを使用して、〜Attribute Selectorトリックを使用することにより、2つのプロパティのいずれかを指すことができます。

/* Target data-info attr that contains the value 'external' */ a[data-info~='external'] { color: red } /* And which contain the value 'image' */ a[data-info~='image'] { border: 1px solid black }

素晴らしいですね。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

17. X：チェック済み

input[type=radio]:checked { border: 1px solid black } 

この疑似クラスは、すでに選択されている無線要素にのみ一致します。とても簡単です。

例を見る

互換性

• E9 +
• Firefox
• クロム
• サファリ
• オペラ

18. X：後

疑似クラスの前後も非常に苦痛です。人々はそれらを毎日効果的に使用するための新しい方法を見つけたり発明したりできるようです。セレクター周辺のコンテンツを簡単に制御できます。
最初の使用の多くは、クリアフィックスを改善する必要があるためです。

.clearfix:after { content: '' display: block clear: both visibility: hidden font-size: 0 height: 0 } .clearfix { *display: inline-block _height: 1% }

この改善では、：after疑似クラス要素を使用して、要素の後にスペースを追加してからクリアします。この牛Xのトリックは、特にoverflow：hiddenメソッドが無力である場合にキットに収集する必要があります。
他のクリエイティブな用途を見たい： 影のトリックを作成するために私を訪ねてください

Css3セレクターの標準的な手順では、これらの疑似クラス構文を巧みに使用する必要があります-ダブルコロン::。ただし、互換性のために、ブラウザは二重引用符を受け入れます。

互換性

• IE8 +
• Firefox
• クロム
• サファリ
• オペラ

19. X：ホバー

div:hover { background: #e3e3e3 } 

私は行きます、これはあなたが理解しなければなりません。ユーザーの典型的な公式形式は、疑似クラスをトリガーします。少し紛らわしいように聞こえますが、そうではありません。ユーザーが要素にカーソルを合わせたときに特別なスタイルを定義したいですか？このプロパティはこれを行うためのものです。

古いバージョンのIEは、アンカータグの後にのみこのホバーを使用できることを忘れないでください。

このセレクターを最もよく使用する場合、アンカーがホバリングしているときにボーダーボトムを追加すると推定されます。

a:hover { border-bottom: 1px solid black } 

ヒント：border-bottom：text-decoration：underlineよりも優れた1pxの黒一色（本当に？私は行きます）

互換性

• IE6 +（IE6では、：hoverをアンカー要素に適用する必要があります）
• Firefox
• クロム
• サファリ
• オペラ

20. X：not（セレクター）

div:not(#container) { color: blue }

多くの場合、疑似グレーではありません。たとえば、コンテナのIDを除くすべてのdivを選択したいとします。上記のコードスニペットは完全に実装されます。
pを除くすべての要素を選択する場合は、次のようにします。

*:not(p) { color: green } 

例を見る

互換性

• IE9 +
• Firefox
• クロム
• サファリ
• オペラ

21. X :: pseudoElement

p::first-line { font-weight: bold font-size: 1.2em }

疑似要素（::で表される）を使用して、要素のスタイルを定義できます。たとえば、最初の行、最初の文字は、このメソッドは兄弟要素にのみ適用できることを覚えておいてください。

疑似要素は2つのコロンで構成されます:::

pの最初の文字のスタイルを指定します

p::first-letter { float: left font-size: 2em font-weight: bold font-family: cursive padding-right: 2px }

このコードはすべての段落を検索し、それらの段落の最初の文字を定義します。
これは、模造新聞の最初の文字スタイルでよく使用されます。
pの最初の線のスタイルを指定します

p::first-line { font-weight: bold font-size: 1.2em } 

繰り返しますが、この:: first-line疑似要素は、予想どおり、段落の最初の行のスタイルのみを定義します。

例を見る

互換性

• IE6 +
• Firefox
• クロム
• サファリ
• オペラ

22. X：nth-​​child（n）

li:nth-child(3) { color: red } 

要素のヒープから要素を選択できない時代を考えてみてください。 n番目の子の疑似クラスはこの問題を解決します。
nth-childは整数と変数を受け入れますが、0から開始しないことに注意してください。2番目のliを選択する場合は、li：nth-​​child（2）を使用します。
このメソッドを使用して、子要素を選択することもできます。たとえば、li：nth-​​child（4n）を使用して、4つの倍数のすべての要素の選択を完了することができます。

例を見る

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ

23. X：nth-​​last-child（n）

li:nth-last-child(2) { color: red } 

ulにliがたくさんある場合、最後の3つのliだけを実行する方法が必要ですか？ li：nth-​​child（397）を使用する代わりに、n番目の最後の子の疑似クラスを使用できます。
この手法は第6条とほぼ同じくらい効果的ですが、2つの違いは、最後から収集され、バックトラックされることです。

例を見る

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ
• オペラ

24. X：nth-​​of-type（n）

ul:nth-of-type(3) { border: 1px solid black }

子供を渡すのではなく、要素タイプに要素を選択させたいと思う時間はたくさんあるはずです。
5つの順序付けられていないリスト（UL）をマークすることを想像してみてください。 3番目のulを定義する必要があり、それを見つけるための一意のIDがない場合は、nth-of-type（3）疑似クラスを使用できます。上記のコードスニペットでは、3番目のulのみに黒い境界線があります。

例を見る

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ

25. X：nth-​​last-of-type（n）

ul:nth-last-of-type(3) { border: 1px solid black } 

そうです、nth-last-of-typeを使用して、セレクターを最後からさかのぼって、必要な要素を見つけることができます。

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ
• オペラ

26. X：最初の子

ul li:first-child { border-top: none } 

この構造の疑似クラスにより、要素の最初の子を選択できます。通常、このメソッドを使用して、最初または最後の要素の境界線を削除できます。
たとえば、それぞれがborder-topとborder-bottomを持つ一連の行があります。この場合、最初と最後の行は奇妙に見えます。
多くの設計者は、この欠陥を補うために最初と最後のクラスを使用します。代わりに、これらの疑似クラスを使用してこれらの問題を解決できます。

例を見る

互換性

• IE7 +
• Firefox
• クロム
• サファリ
• オペラ

27. X：最後の子

ul > li:last-child { color: green }

最初の子とは対照的に、最後の子は親の最後の子を選択します。
例：
これらのクラスの可能な使用法を示すために、いくつかの例を作成します。紹介するスタイルを構築します。
マーク

<ul> <li> List Item li> <li> List Item li> <li> List Item li> ul> 

特別なことは何もありません。単純なシーケンスです。
Css

ul { width: 200px background: #292929 color: white list-style: none padding-left: 0 } li { padding: 10px border-bottom: 1px solid black border-top: 1px solid #3c3c3c } 

このスタイルは、背景を設定し、ブラウザのデフォルトのulパディング値を削除し、各liの境界線を定義して少し奥行きを与えます。

上に示したように、唯一の問題は、上下の境界線が少し奇妙に見えることです。この問題を解決するために：first-childと：last-childを使用してみましょう。

li:first-child { border-top: none } li:last-child { border-bottom: none } 

写真を見て、それを解決します。

例を見る

互換性

• IE9 +
• Firefox
• クロム
• サファリ
• オペラ

はい、IE8は最初の子をサポートしていますが、最後の子はサポートしていません。

28. X：一人っ子

div p:only-child { color: red }

正直なところ、一人っ子の疑似クラスを頻繁に使用しないことに気付くでしょう。それでも、それは機能します、あなたはそれを必要とするべきです。
親ノードの唯一の子である（他の子はない）要素を選択するのに役立ちます。たとえば、上記のコードを使用すると、divの唯一の子のp段落のみがその色を赤として定義します。
次のマークアップを想定します。

<div><p> My paragraph here. p>div> <div> <p> Two paragraphs total. p> <p> Two paragraphs total. p> div> 

したがって、2番目のdivのpタグの内容は選択されません。最初のdivのpのみが選択されます。

例を見る

互換性

• IE9 +
• Firefox
• クロム
• サファリ
• オペラ

29. X：唯一のタイプ

li:only-of-type { font-weight: bold } 

この構造の疑似クラスには、いくつかの灰色で巧妙な使用法があります。親ノードに兄弟がない要素を選択できます。たとえば、子としてliが1つしかないulを選択できます。
まず、それはあなたがこの目標をどのように達成したいかに依存します。 ul liを使用できますが、今回はすべてのli要素を選択します。唯一の方法は、only-of-typeを使用することです。

ul > li:only-of-type { font-weight: bold }

例を見る

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ
• オペラ

30. X：最初のタイプ

first-of-type疑似クラスを使用すると、そのタイプの最初の兄弟を選択できます。
テスト
それをよりよく理解するために、それをテストしてみましょう。以下のタグをエディターにコピーします。

<div> <p> My paragraph here. p> <ul> <li> List Item 1 li> <li> List Item 2 li> ul> <ul> <li> List Item 3 li> <li> List Item 4 li> ul> div> 

さあ、急いで読んではいけません。「LIST ITEM2」を選択する方法を試してみてください。あなたがそれを得る（またはあきらめる）場合は、読み続けてください。

解決策1

このテストを実行する方法はたくさんあります。その一部を確認します。最初のタイプから始めます。

ul:first-of-type > li:nth-child(2) { font-weight: bold } 

このコードスニペットは、基本的に、 '最初の順序付けられていないリストを検索し、次に内部のliを検索し、2番目のliが見つかるまでフィルターを使用し続けることを意味します。

解決策2

別の可能な解決策は、セレクターに隣接することです。

p + ul li:last-child { font-weight: bold } 

このシナリオでは、pの隣接ノードulを見つけてから、ulのliの最後の子を見つけます。

解決策3

これらのセレクターは自由に選択できます。

ul:first-of-type li:nth-last-child(1) { font-weight: bold }

今回は、最初のulを取得してから最初の要素を見つけますが、最後の要素から始めます。ハハ。

例を見る

互換性

• IE9 +
• Firefox3.5以降
• クロム
• サファリ
• オペラ

結論として

IE6などの古いブラウザの欠陥を解決するのにまだ苦労している場合。これらの新しいセレクターには、まだ十分注意する必要があります。ただし、これがこれらの新しいガジェットの学習を妨げるためではありません。自分を虐待しないでください。こちらの互換性リストに注意してください。一方では、Dean Edwardの優れたIE9.jsスクリプトを使用して、古いブラウザーに新しいセレクターサポートを提供できます。 （行きます。かっこいい）
次に、一般的なjQueryなどのJavaScriptライブラリを使用する場合は、ライブラリのカスタムメソッド/セレクターを使用する代わりに、これらのcss3独自のセレクターを使用するのが最適です。これにより、これらのライブラリセレクターを使用する代わりに、これらのセレクターエンジン自体をブラウザーで解析できるため、コードが高速になります。
読んでくれてありがとう、私はあなたが1つか2つのスキルを学ぶことができることを願っています。

翻訳者のメモ

この記事は翻訳された記事を求めています、元のテキストは 'です 覚えておかなければならない30のCSSセレクター 「」

翻訳を続けるために私をサポートしてください。

。

。