CSS3でよく使われる最新セレクター30選まとめ（初心者向け）

1、

*: ユニバーサル要素セレクター

* { マージン: 0; }

*セレクターはページ上のすべての要素を選択します。上記のコードの機能は、すべての要素のマージンとパディングを 0 に設定することです。これは、デフォルトの CSS スタイルをクリアする最も基本的な方法です

。

* セレクターは、次のコードのようにサブセレクターにも適用できます:

#container * { border: 1px 単色黒 }

このようにして、IDコンテナを持つすべての子タグ要素が選択され、境界線が設定されます。

2

#ID:IDセレクター

#container { 幅: 960px; マージン: 自動 }

ID セレクターは CSS で最も効率的なセレクターです。これを使用する場合は、ID の一意性を保証する必要があります。

3

.class: クラスセレクター

.error { 色: 赤 }

クラス セレクターは ID セレクターよりも効率が低く、ページには複数のクラスを含めることができ、クラスはさまざまなタグで使用できます。

4

X Y: タグ組み合わせセレクター

li a { テキスト装飾: なし }

タグ組み合わせセレクターも一般的に使用されるセレクターです。

5

X: タグセレクター

a { 色: 赤; } ul { マージン左: 0;

ページ上の特定のタグのスタイルを変更したいだけの場合は、タグ セレクターの使用を選択できます。

6

X:訪問済み、X:リンク

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

疑似クラスセレクター、最も一般的に使用されるのは A タグです

7

X + Y：毗邻元素选择器

 

ul + p { color: red; }

毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

 

8

 

X > Y：子元素选择器

 

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

匹配#container下的所有子元素。

关于X>Y和X Y的区别请看下面的html实例：

 

• List Item
  • Child
• List Item
• List Item
• List Item

セレクター #container > は、li の ul ではなく、#container の子要素 ​​UL である最初の UL のみに一致しますが、div ul はすべての DIV の ul に一致します。

9

X ~ Y：

ul ~ p { 色: 赤 }

X 要素の後の兄弟 P 要素と一致します。つまり、UL 以降の同じレベルの要素がすべて選択されます。

10

X[タイトル]: 属性セレクター

a[タイトル] { 色: 緑 }

特定の属性を持つタグを照合します。たとえば、この例では、a タグと title 属性を照合します。

11

X[href="foo"]

a[href="http://js8.in"] { color: #1f6053; /* nettuts green */ }

は属性セレクターにも属し、属性内の特定の値を持つタグを照合します。たとえば、例の href="http://js8.in" に一致する a タグは選択されていませんが、他のリンクの a タグは選択されていません。

12

X[href*="nettuts"]

a[href*="tuts"] { color: #1f6053; /* nettts 緑 */ }

は属性セレクターに属し、href 内の tuts を含むすべてのタグと一致します。通常のマッチング

13

X[href^="http"]

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

上記の星座選択タグに似ていますが、http で始まる A タグと一致し、通常の一致が行われます

14

X[href$=".jpg"]

a[href$=".jpg"] { 色: 赤 }

属性内の .jpg で終わるタグの一致、通常の一致、および属性セレクターの一種です

15

X[data-*="foo"]

すべての画像リンクを一致させたい場合は、次の CSS を使用して実行できます:

a[href$=".jpg"]、a[href$=".jpeg"]、a[href$=".png"]、a[href$=".gif"] { 色: 赤; }

しかし、data-filetype 属性を a タグに追加すると、次の CSS を使用して、一致する必要があるタグをすばやく選択できます。

/a>

 -filetype="image"] { 色: 赤 }

16

X[foo~="バー"]

a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px ソリッドブラック }
次の例のように、X 要素を属性内のスペースで区切られた複数の値と照合します。そのうちの 1 つが「bar」に等しい: 

17

X:チェック済み

input[type=radio]:checked { border: 1px 単色黒 }
このセレクターは主にチェックボックスに使用され、現在選択されているラベルとしてチェックボックスを選択します。 

18

X:
後

.clearfix:after {コンテンツ: ""; 表示: 非表示; フォントサイズ: 0; } }
before と after は、選択したタグの前後にコンテンツを挿入するために使用されます。通常、フロートをクリアするために使用されますが、IE6 および IE7 では使用できません。 

19

X:ホバー

div:hover {背景: #e3e3e3 }
最もよく使用されるタグはAタグですが、IE6ブラウザではAタグを除く他のタグdiv:hoverは一致しません。 

20

X:not(セレクター)

*:not(p) { 色: 緑 }
()内のセレクターを除くラベル要素を選択します。 

21

X::pseudoElement

p::first-line { フォントの太さ: フォントサイズ: 1.2em; } p::first-letter { フォントの太さ: 2em;筆記体; 右パディング: 2px;
 は、要素の最初の行と最初の文字をそれぞれ一致させるために使用されます。例を参照してください: 



22



X:n番目の子(n)



li:nth-child(3) { 色: 赤 }

 X 要素の最初のいくつかのタグと一致します。たとえば、上記のコードは 3 番目の li タグと一致します。 



23



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



li:nth-last-child(2) { 色: 赤 }

前のセレクターとは異なり、このセレクターはタグを逆順で照合します。上記のコードは最後から 2 番目の li タグと照合することを意味します
。


24



X:nth-of-type(n)



ul:nth-of-type(3) { border: 1px 単色黒 }

 :nth-child() に似ていますが、同じタグを使用する要素のみに一致します



25



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



ul:nth-last-of-type(3) { border: 1px 単色黒 }

 :nth-last-child() に似ていますが、同じタグを使用する要素のみに一致します



26



X:第一子



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

 親要素の n 番目の子要素と一致します。最初の子要素には 1 が付けられます



27



X:最後の子供



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

親要素の下からn番目の子要素と一致し、最初の子要素には1の番号が付けられます



28

X:一人っ子

div p:only-child { color: red }
 親要素の下にある唯一の子要素と一致します。これは、first-child:last-child または :nth-child(1):nth-last-child(1) と同等です

29

X:タイプのみ

li:only-of-type { font-weight: 太字 }
 親要素の下で同じタグを使用する唯一の子要素と一致します。これは、first-of-type: last-of-type または: nth-of-type(1):nth-last-of-type と同等です。 (1)

30

X:first-of-type

li:only-of-type { font-weight: 太字 }
 親要素の下で同じタグを使用する最初の子要素と一致します。これは、nth-of-type(1)
と同等です。