30CSSセレクター

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要素のいずれか、あるいは擬似クラスを使用してみてください。

3. .X

.error { color: red;}

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

4. X

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

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

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

コンビネータセレクタ

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のセレクタは、ulの直接の子であるdividcontainer。, たとえば、ul最初のliの子であるliをターゲットにしません。

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

8. X~Y

ul ~ p { color: red;}

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

コンビネータセレクタのライブデモ

属性セレクタ

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;}

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

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

検索していないことに注意してください;それは不要であり、

で始まる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>

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

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

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

擬似セレクタ

16. X:visitedおよびX:link

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

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

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

17. X:checked

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

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

18. X:後

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

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

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

これの別の創造的な使用については、影を作成する上で私のクイックヒントを参照してください。,

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

19. X:hover

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(selector)

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

否定pseudo似クラスは特に便利です。すべてを選択したいとしましょうdividがあるものを除いて、container。上記のスニペットはそのタスクを完全に処理します。または、段落タグ以外のすべての要素（推奨されていない）を選択したい場合は、次のようにします。

*: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-letter、:beforeおよび:after）に対する以前のコロン表記を受け入れる必要があります。この互換性は、この仕様で導入された新しい擬似要素には許可されていません。,”-W3Cセレクタ仕様

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

N番目の子と型セレクタ

22。 X:nth-child(n)

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

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

nth-childパラメータとして整数を受け入れますが、これはゼロベースではありません。第二のリスト項目をターゲットにする場合は、li:nth-child(2)を使用します。

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

23. X:nth-last-child(n)

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

ulにアイテムの巨大なリストがあり、たとえば最後のアイテムにアクセスするだけで済んだ場合はどうなりますか？ li:nth-child(397)を実行するのではなく、代わりにnth-last-child擬似クラスを使用できます。

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

24., X:nth-of-type(n)

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

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

順不同のリストを含むマークアップを想像してみてください。第三のulのみをスタイルしたい場合、一意のidをフックするには、nth-of-type(n)擬似クラスを使用できます。上記のスニペットでは、第三の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;}

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

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

27. X:last-child

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

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

`last-child`セレクタの例

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

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

マークアップには、特別なものは何もありません：単純なリストだけです。このスタイリングは、背景を設定し、ブラウザのデフォルトのパディングを削除しますul、および各に境界線を適用しますli

リストに深さを追加するには、border-bottom各liliの背景色よりも暗い影または二つであるborder-bottomを適用します。, 次に、適用します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>

この場合、第二のdivの段落はターゲットになりません。div。要素に複数の子を適用するとすぐに、only-child擬似クラスが有効にならなくなります。

29. X:only-of-type

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

この構造pseudo似クラスは、いくつかの巧妙な方法で使用できます。親コンテナ内に兄弟を持たない要素をターゲットにします。例として、単一のリスト項目のみを持つすべての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

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

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

このシナリオでは、ulすぐにpタグを実行し、要素の最後の子を見つけます。

ソリューション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項目があります。,

CSS3

最新のWebプロジェクトのための12のエレガントなCSS価格表

Monty Shokeen
Bootstrap4

18最高のブートストラップ4プラグイン

Monty Shokeen

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

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

通常、あなたはそのようなリソースのために支払う必要があります。でもアクセスでき、数百万の創作資産お符号化プロジェクト全体の月の完全無料です。そして、さらに、あなたは無制限のダウンロードを得るので、あなたはその月の間に好きなだけつかむことができ、あなたが継続することを決定した場合,

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

elements_cont_tuts-freemonth1-4bwkbp