あなたが暗記しなければならない30のCSSセレクタ

Cssを学ぶ：完全なガイド

私たちは、あなたがちょうど基本を始めているか、より高度なCSSを探索したいかどうか、あなたがCSSを学ぶのを助けるための完全なガイドを構築しました。

CSSセレクタ

だから、ベースのid、class、およびdescendantセレクタを学びました-そしてそれを一日と呼んだのですか？ もしそうなら、あなたは柔軟性の巨大なレベルを逃しています。 これらの高度なCSSとCSS3セレクタをメモリにコミットすることは、自分自身に借りています。

基本セレクタ

1. *

* { margin: 0; padding: 0;}

私たちは、より高度なセレクタに移動する前に、のは、初心者のために、明白なものをノックアウトしてみましょう。

星のシンボルは、ページ上のすべての単一の要素をターゲットにします。 多くの開発者は、marginとpaddingをゼロにするためにこのトリックを使用します。 これは確かに迅速なテストでは問題ありませんが、本番コードではこれを使用しないことをお勧めします。 これは、ブラウザ上であまりにも多くの重量を追加し、不要です。

*は子セレクタでも使用できます。

#container * { border: 1px solid black;}

これは、#containerdivの子であるすべての単一の要素をターゲットにします。 再度、この技術を非常に使用しないことを試みなさい。

2. #X

#container { width: 960px; margin: auto;}

ハッシュシンボルの前にセレクタを付けると、idでターゲットにすることができます。 これは簡単に最も一般的な使用法ですが、idセレクタを使用する場合は注意してください。

自問してください：私は絶対にそれをターゲットにするために、この要素にidを適用する必要がありますか？

idセレクタはリジッドであり、再利用はできません。 可能であれば、最初にタグ名、新しいHTML5要素の1つ、または疑似クラスを使用してみてください。

3. .X

.error { color: red;}

これはclassセレクタです。 idsとclassesの違いは、後者では複数の要素をターゲットにできることです。 要素のグループにスタイルを適用する場合は、classesを使用します。 または、idを使用して干し草の山で針を見つけ、その特定の要素のみをスタイルします。

4. X

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

ページ上のすべての要素をidまたはclass名前ではなくtypeに従ってターゲットにしたい場合はどうなりますか？ それを単純にして、型セレクタを使用します。 順序付けされていないリストをすべて対象にする必要がある場合は、ul {}を使用します。

基本セレクタのライブデモ

Combinatorセレクタ

5. X Y

li a { text-decoration: none;}

次の最も一般的なセレクタはdescendantセレクタです。 セレクタをより具体的にする必要がある場合は、これらを使用します。 たとえば、すべてのアンカータグをターゲットにするのではなく、順不同のリスト内にあるアンカーのみをターゲットにする必要がある場合はどうなりま これは、特に子孫セレクタを使用する場合です。

Pro-tip:セレクタがX Y Z A B.errorのように見える場合、間違っています。 その重量のすべてを適用することは絶対に必要であるかどうか常にあなた自身に尋ねなさい。

6. X+Y

ul + p { color: red;}

これを隣接セレクタと呼びます。 前の要素の直前にある要素のみが選択されます。 この場合、各ulの後の最初の段落のみが赤いテキストを持ちます。

7. X>Y

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

標準のX YとX > Yの違いは、後者が直接の子のみを選択することです。 たとえば、次のマークアップを考えます。

 <div> <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のcontainerを持つdivの直接の子であるulのみを対象とします。 たとえば、最初のliの子であるulをターゲットにしません。

このため、child combinatorを使用することにはパフォーマンス上の利点があります。 実際には、特にJavaScriptベースのCSSセレクタエンジンを使用する場合にお勧めします。

8. X~Y

ul ~ p { color: red;}

この兄弟コンビネータはX + Yに似ていますが、それほど厳密ではありません。 隣接するセレクタ(ul + p)は、前のセレクタの直前にある最初の要素のみを選択しますが、これはより一般化されています。 上記の例を参照して、p要素がulに続く限り、任意のp要素が選択されます。

Combinatorセレクタのライブデモ

属性セレクタ

9. X

a { color: green;}

属性セレクタと呼ばれ、上記の例では、title属性を持つアンカータグのみが選択されます。 そうでないアンカータグは、この特定のスタイルを受け取りません。 しかし、より具体的にする必要がある場合はどうなりますか？ 次の例をチェックしてください！

10. X

a { color: #83b348; /* Envato green */}

上記のスニペットは、https://code.tutsplus.comにリンクするすべてのアンカータグのスタイルを設定します; 彼らは私達の決め付けられた緑色を受け取る。 他のすべてのアンカータグは影響を受けません。

値を引用符で囲んでいることに注意してください。 JavaScript CSSセレクタエンジンを使用するときにもこれを行うことを忘れないでください。 可能であれば、常に非公式の方法よりもCSS3セレクタを使用してください。

これはうまくいきますが、少し硬直しています。 リンクが実際にEnvato Tuts+に直接接続されている場合はどうなりますかが、おそらくパスは次のようになりますcode.tutsplus.com 完全なURLではなく？ そのような場合は、正規表現の構文を少し使用できます。

11. X

a { color: #83b348; /* Envato green */}

そこに行く;それが必要なものです。 星は、進行する値が属性の値のどこかに表示されなければならないことを示します。 そうすれば、これはカバーしますtutsplus.com,code.tutsplus.com、さらにはwebdesign.tutsplus.com.

これは広範な声明であることに注意してください。 アンカータグがURLに文字列tutsplusを持つ非Envatoサイトにリンクされている場合はどうなりますか？ より具体的にする必要がある場合は、^と$を使用して、文字列の先頭と末尾をそれぞれ参照します。

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

いくつかのウェブサイトは、外部のリンクの横に小さなアイコンを表示することができる方法を疑問に思いますか？ 私はこれらを前に見たことを確かめる;それらはリンクが完全に別のウェブサイトに指示すること素晴らしいメモである。

これはカラットのシンボルを持つ楽勝です。 これは、文字列の先頭を指定するために正規表現で最も一般的に使用されます。 httpで始まるhrefを持つすべてのアンカータグをターゲットにしたい場合は、上に示したスニペットと同様のセレクタを使用できます。

https://を検索していないことに注意してください。https://で始まるUrlは考慮されません。https://で始まるUrlは考慮されません。

さて、代わりに写真にリンクするすべてのアンカーのスタイルを設定したい場合はどうすればよいですか？ そのような場合は、文字列の末尾を検索してみましょう。

13. X

a { color: red;}

ここでも、正規表現記号$を使用して、文字列の末尾を参照します。 この場合、画像にリンクするすべてのアンカー、または少なくとも.jpgで終わるURLを検索しています。 これはGIFとPNG画像をキャプチャしないことに注意してください。

14. X

a { color: red;}

さまざまな画像タイプのすべてをどのように補正するのですか？ さて、次のような複数のセレクタを作成することができます:

a,a,a,a { color: red;}

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

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

次に、そのフックを所定の位置に置いて、標準の属性セレクタを使用して、それらのアンカーのみをターゲットにすることができます。

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

ここにあなたの友人を感動させる特別なものがあります。 あまりにも多くの人々がこのトリックについて知っていません。 チルダ(~)記号を使用すると、スペースで区切られた値のリストを持つ属性をターゲットにすることができます。

上記の15番のカスタム属性と一緒に、data-info属性を作成し、メモする必要があるもののスペースで区切られたリストを受け取ることができます。 この場合、外部リンクと画像へのリンクをメモします—例のためだけに。

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

そのマークアップを設定すると、~attributes selectorトリックを使用して、これらの値のいずれかを持つタグをターゲットにすることができます。

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

かなり気の利いた、ハァッ？

属性セレクタのライブデモ

擬似セレクタ

16. X:訪問されたおよびX:リンク

a:link { color: red; }a:visited { color: purple; }

:link擬似クラスを使用して、まだクリックされていないすべてのアンカータグをターゲットにします。

あるいは、:visited擬似クラスもありますが、これにより、クリックされた、または”訪問された”ページ上のアンカータグのみに特定のスタイルを適用できます。

17. X:checked

input:checked { border: 1px solid black;}

この擬似クラスは、ラジオボタンやチェックボックスのように、チェックされたユーザーインターフェイス要素のみを対象とします。 それはそれと同じくらい簡単です。

18. X:

の後、beforeとafter擬似クラスは素晴らしいです。 毎日、人々はそれらを効果的に使用するための新しい創造的な方法を見つけているようです。 彼らは単に選択された要素の周りにコンテンツを生成します。

多くは、clear-fixハックに遭遇したときに最初にこれらのクラスに導入されました。

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

このハックは、:after擬似クラスを使用して要素の後にスペースを追加し、それをクリアします。 特にoverflow: hidden;メソッドが不可能な場合には、ツールバッグに入れるのは優れたトリックです。

これの別の創造的な使用については、影の作成に関する私の簡単なヒントを参照してください。

CSS3セレクタ仕様によると、技術的には二つのコロン::の擬似要素構文を使用する必要があります。 ただし、互換性を維持するために、user-agentは単一のコロンの使用も受け入れます。

19. X：ホバー

div:hover { background: #e3e3e3;}

ああ、さあ。 あなたはこれを知っています。 これの正式な用語は「ユーザーアクション擬似クラス」です。 ユーザーが要素の上に置いたときに特定のスタイルを適用したいですか？ これは仕事を成し遂げるでしょう！

古いバージョンのInternet Explorerは、:hover擬似クラスがアンカータグ以外のものに適用されたときに応答しないことに注意してください。

ほとんどの場合、このセレクタは、たとえば、アンカータグにborder-bottomを適用するときに使用します。

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

プロヒント：border-bottom: 1px solid black;はtext-decoration: underline;よりも良く見えます。

20. X:not(セレクタ)

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

否定擬似クラスは特に便利です。 Idがcontainerのものを除いて、すべてのdivを選択したいとしましょう。 上記のスニペットは、そのタスクを完全に処理します。

または、段落タグを除いてすべての単一の要素（推奨されていない）を選択したい場合は、次のようにします:

*:not(p) { color: green;}

21. X::pseudoElement

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

擬似要素(::で指定)を使用して、最初の行や最初の文字などの要素のフラグメントをスタイルすることができます。 これらを有効にするには、ブロックレベルの要素に適用する必要があることに注意してください。

擬似要素は二つのコロンで構成されています: ::

段落の最初の文字をターゲット

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

このスニペットは、ページ上のすべての段落を検索し、その要素の最初の文字のみをサブターゲットにする抽象化です。

これは、記事の最初の文字のために新聞のようなスタイルを作成するために最も頻繁に使用されます。

段落の最初の行をターゲット

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

同様に、::first-line擬似要素は、期待どおりに、要素の最初の行のみをスタイルします。

“既存のスタイルシートとの互換性のために、ユーザーエージェントは、CSSレベル1と2で導入された擬似要素の前のワンコロン表記を受け入れる必要があ, :first-line, :first-letter, :before および:after）。 この互換性は、この仕様で導入された新しい擬似要素には許可されていません。”-W3Cセレクタ仕様

擬似セレクタのライブデモ

N番目の子と型セレクタ

22. X:n番目の子(n)

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

スタック内の特定の要素をターゲットにする方法がなかった時代を覚えていますか？ nth-child擬似クラスはそれを解決します！

nth-childはパラメータとして整数を受け入れますが、これはゼロベースではないことに注意してください。 2番目のリスト項目をターゲットにする場合は、li:nth-child(2)を使用します。

これを使用して、子の変数セットを選択することもできます。 たとえば、li:nth-child(4n)を実行して、4番目のすべてのリスト項目を選択できます。

23. X:n番目の最後の子(n)

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

たとえば、ulに膨大な項目リストがあり、最後から3番目の項目だけにアクセスする必要があった場合はどうなりますか？ li:nth-child(397)を実行するのではなく、代わりにnth-last-child擬似クラスを使用できます。

この手法は、上記の16番とほぼ同じように機能します。 違いは、それがコレクションの終わりに始まり、戻ってその方法を動作することです。

24. X:n番目のタイプ(n)

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

childを選択するのではなく、代わりに要素のtypeに従って選択する必要がある場合があります。

5つの順序付けられていないリストを含むマークアップを想像してみてください。 3番目のulのみのスタイルを設定し、フックする一意のidがない場合は、nth-of-type(n)擬似クラスを使用できます。 上記のスニペットでは、3番目のulだけがその周りに境界線を持ちます。

25. X:nth-last-of-type(n))

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

そして、はい、一貫性を保つために、nth-last-of-typeを使用してセレクタリストの最後から始め、目的の要素をターゲットに戻すこともできます。

26. X:first-child

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

この構造的な擬似クラスは、要素の親の最初の子のみをターゲットにすることができます。 多くの場合、最初と最後のリスト項目から境界線を削除するためにこれを使用します。たとえば、行のリストがあり、それぞれにborder-topとborder-bottomがあるとします。 まあ、その配置では、そのセットの最初と最後の項目は少し奇妙に見えます。

多くの設計者は、これを補うためにfirstとlastのクラスを適用します。 代わりに、これらの擬似クラスを使用できます。

27. X:last-child

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

first-childの反対側、last-childは要素の親の最後の項目をターゲットにします。

last-childセレクタの例

これらのクラスの使用可能な1つを示すための簡単な例を構築しましょう。 スタイル付きリスト項目を作成します。

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

マークアップには特別なことは何もありません。

:

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に境界線を適用して少し深さを提供します。

リストに奥行きを追加するには、liの背景色よりも1つまたは2つ暗いborder-bottomを各liに適用します。 次に、明るい色合いのカップルであるborder-topを適用します。

上の画像に示すように、唯一の問題は、順序付けられていないリストの最上部と下部に境界線が適用されることです—これは奇妙に見えます。 これを修正するには、:first-childと:last-child擬似クラスを使用しましょう。

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

そこに行く;それはそれを修正します！

28. X:only-child

div p:only-child { color: red;}

正直なところ、おそらくonly-child擬似クラスをあまり頻繁に使用することはありません。 それにもかかわらず、それはあなたがそれを必要とするならば、利用可能です。

それはあなたがその親の唯一の子である要素をターゲットにすることができます。 たとえば、上記のスニペットを参照すると、divの唯一の子である段落のみが赤色に着色されます。

次のマークアップを仮定しましょう。

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

この場合、2番目のdivの段落はターゲットにされず、最初のdivのみが対象になります。 要素に複数の子を適用するとすぐに、only-child擬似クラスは有効になりません。

29. X:only-of-type

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

この構造的な擬似クラスは、いくつかの巧妙な方法で使用できます。 親コンテナ内に兄弟を持たない要素をターゲットにします。 例として、単一のリスト項目のみを持つすべてのulを対象としましょう。

まず、このタスクをどのように達成するかを自問してください。 あなたはul liをすることができますが、これはすべてのリスト項目を対象とします。 唯一の解決策はonly-of-typeを使用することです。

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

30. X:first-of-type

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>

ここで、さらに読むことなく、”リスト項目2″のみをターゲットにする方法を理解してみてください。 あなたがそれを考え出した（またはあきらめた）ときは、読んでください。

ソリューション1

このテストを解決するには、さまざまな方法があります。 私たちはそれらの一握りを確認します。 first-of-typeを使用して始めましょう。

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

このスニペットは、基本的に、ページ上の最初の順序付けられていないリストを検索し、リスト項目である直接の子のみを検索すると言います。 次に、それをそのセット内の2番目のリスト項目のみにフィルタリングします。

解決策2

別のオプションは、隣接するセレクタを使用することです。

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

このシナリオでは、pタグをすぐに進めるulを見つけて、要素の最後の子を見つけます。

ソリューション3

私たちは、これらのセレクタで好きなように不快または遊び心することができます。

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

今回は、ページ上の最初のulを取得し、最初のリスト項目を見つけますが、下から始まります！

N番目の子と型セレクタのライブデモ

結論

Internet Explorer6のような古いブラウザを補償している場合は、これらの新しいセレクタを使用する際には注意する必要があります。 しかし、それはこれらを学ぶことからあなたを阻止させてはいけません。 あなたは自分自身に大きな害を及ぼすでしょう。 ブラウザの互換性リストについては、必ずこちらを参照してください。 また、Dean Edwardの優れたIE9を使用することもできます。古いブラウザにこれらのセレクタのサポートをもたらすためのjsスクリプト。

第二に、人気のあるjQueryのようなJavaScriptライブラリを扱うときは、可能な限り、ライブラリのカスタムメソッド/セレクタよりもこれらのネイティブCSS3セ セレクタエンジンは独自のものではなく、ブラウザのネイティブ解析を使用できるため、コードをより高速にします。

webデザインの基礎を学ぶのに時間を費やしているのは素晴らしいことですが、迅速な解決策が必要な場合は、すぐに使用できるCSSテンプレートの 我々はまた、あなたが考慮するためのいくつかのプレミアムCSSアイテムを持っています。

• 
  CSS3
  最新のWebプロジェクトのための15のエレガントなCSS価格表
  Monty Shokeen
• 
  ブートストラップ4
  18最高のブートストラップ4プラグイン
  モンティShokeen

Envato要素への1ヶ月間の無料アクセス

最後に、ここでは、プロ並みのサイトやアプリを構築するのに役立つ非常に特別なオファーです。 これらのCSSセレクタを使用するだけでなく、高品質のストック写真、ビデオ映像、プレミアムフォント、グラフィック、イラストなどを活用してみませんか？

通常は、そのようなリソースのために支払う必要があります。 しかし、今、あなたは完全に無料で、一ヶ月のためにあなたのコーディングプロジェクトのための創造的な資産の何百万人にアクセスすることがで そして、さらに、あなたは無制限のダウンロードを得るので、あなたはその月の間に好きなだけつかむことができ、あなたが継続することを決定した場

このオファーを利用するには、この特別なサインアップリンクをクリックするか、登録ページで以下のコードを入力します:

elements_cont_tuts-freemonth1-4bwkbp

あまりにも長い間待ってはいけない—オファーは限られた時間のためにのみ有効です！