セレクタ
ユニバーサルセレクター

CSSコードの概要は次のようになります。

セレクター（CSSプロパティ：値; CSSプロパティ：値; ...など）

ユニバーサルセレクターでは、アスタリスク*がセレクターとして機能します。

*（CSSプロパティ：値; CSSプロパティ：値; ...など）

ユニバーサルセレクター、HTMLドキュメントのすべてのタグに一度に影響します。

たとえば、HTMLドキュメント内のすべてのタグからすべてのパディングとパディングを削除できます。

*（マージン：0;パディング：0;）

次のコードを含むHTMLドキュメントがあるとします。

ユキヒョウ

次のように。

ユニバーサルセレクターを使用して、すべてのタグのフォントの色を緑、緑、フォント名のarial、フォントスタイルを斜めにします。

ユキヒョウ

ユキヒョウ（irbis、ak leopard）は、大型の略奪的なネコ科の哺乳類です。 アフガニスタン、ビルマ、ブータン、インド、カザフスタン、キルギスタン、中国、モンゴル、ネパール、パキスタン、ロシア、タジキスタン、ウズベキスタンの山脈に生息しています。 irbisは、薄く、長く、柔軟な体、比較的短い脚、小さな頭、非常に長い尾が特徴です。 ユキヒョウの尾の長さは200〜230 cm、体重は最大55kgです。 毛皮の色は明るい、煙のような灰色で、リング状または無地の暗い斑点があります。

ユキヒョウは主にシロイワヤギやヒツジを狩ります。イノシシ、キジ、さらにはホリネズミもその食餌に含まれています。 種の生息地にアクセスできないため、ユキヒョウはまだよく理解されていません。 しかし、概算によると、その数は約1万人程度です。 2013年現在、ユキヒョウの狩猟は一般的に禁止されています。

ブラウザのページは次のようになります。

また、パディングを試して、最初に0にし、次に15pxにして、CSSコードに追加することもできます。

• 実行されるタスクは、すべてのアイテムの選択です。 一般的に、誰もが。
• 指定-アスタリスク記号-*。
• 使用例：

デフォルトですべての要素のインデントをリセット

ユニバーサルセレクターの詳細

バージョン2以降にCSSで導入されました。の任意の要素に一致します。 したがって、ユニバーサルセレクターに指定されたスタイルは、すべての要素に一度に適用されます。 このため、慎重に使用することをお勧めします。スタイルを継承すると問題が発生する可能性があります。 むしろ、（経験の浅いコーダーにとっては）予測できない振る舞いです。 この点については、継承のセクションで詳しく説明します。

ユニバーサルセレクターのもう1つの機能は、単純なセレクターの一部として別のセレクター（クラス、識別子、属性セレクターなど）と組み合わせて使用​​すると、免責でスキップできることです。 これは、「すべてのヒトコブラクダは一頭のラクダである」ではなく、単に「ヒトコブラクダは一頭のラクダである」と言っているのとほぼ同じです。 意味は変わっていません。

例：

* .error（color：red;）。error（color：red;）/ *これら2つのルールは同等です。 2番目のケースではユニバーサルセレクターはスキップされます* /

アプリケーションエリア

実際には、最初の例のように、ユニバーサルセレクターを使用して、スタイル（特にインデント）のブラウザー依存の初期値をリセットするのが最も便利です。

しかし、このアプリケーションでさえ、常に良いアイデアであるとは限りません。 この記事で説明されているユニバーサルセレクターの欠点があるため、使用することをお勧めします。 つまり、タイプセレクターを使用します。

とてもスムーズにあなたと私は次のトピックに来ました。 ユニバーサルセレクターで、それを整理したようです。 次に進む時間です。 次の停車駅 - 。

ブログサイトの読者の皆様、こんにちは。 今日も引き続き資料を詰め込み、CSS言語のセレクターなどの基本的なことについて話し始めます。

それらには、タグ、クラス、ID、ユニバーサル、属性、および疑似クラスと疑似要素の7つのタイプがあります。 ちょっと多すぎますね。 ええと、何もありません。詳細な例を使用して、それらすべてをゆっくりと分析します。

以前の出版物では、CSSの継承の原則について学んだなど、サイズの単位についてすでに検討し、理解しました。 さて、今日、私が言ったように、私たちはスタイルマークアップ言語の研究で非常に深刻な章を開いています。

CSSタグとクラスセレクター

スタイルルールを学習する前に、ブラウザがHtmlコードのどの要素に適用する必要があるかを理解するために、これらのラベルを設定する方法と原則を学ぶ必要があります。 さまざまなセレクターがあります。 最も単純なのは、理解の観点から、タグの後に記述されたCSSルールを適用する必要があるタグの名前を使用することです。

この例では、すべての段落Pタグのフォントの色に赤を使用し、背景の塗りつぶしに灰色を使用します。 どのCSSルールでも、一度に複数のセレクターを持つことができます。 この場合、どのように読む必要がありますか？ 常に 右から左へ、 NS。 冒頭の中括弧に最も近いところから始めます。

上記の例では、最初の行は、すべてのDivのフォントの色を赤にするように指示するタグ（要素）セレクターを示しています。

通常のコンテナDivの内容

2行目には、複雑なセレクターの例があります。この例には、次のような新しい要素があります。 クラス（クラス）..。 品質規定です。 クラスの値として、記号、、、 [_]、[-]を使用して任意の名前を使用できます。

ただし、クラスの他に、Idはスタイルマークアップ言語でも使用されます。 クラスとIDの違いは何ですか？ 後者の値は一意である必要があります。 Idは一意の識別子です HTMLタグとその名前（値）は、コード内で1回だけ使用できます。

また、クラスの値は一意ではなく、コード内の任意の数の要素に使用できます。 それらの。 異なるタグ（Div、P、H1など）は、クラス属性に同じ値を持つことができます。

CSSセレクターでどのように使用されますか？ 彼の名前はつづられていることがわかりました 先に点線.

したがって、CSSコードでドットで始まるものを見ると、クラスについて話していることがすぐにわかります。 スクリーンショットに示されている例を検討すると、Htmlコードのすべての要素で、値が「Blue」の「class」が書き込まれ、テキストは青色になります。

ただし、クラス「Blue」の名前を選択したため、これはまったく発生しません。 好きな名前を付けることができ（「xyz」でも）、この例の色は、このクラスでセレクターに割り当てられたとおりに正確に設定されます。 これが明確であることを望みますか？ 例のクラスの名前（値）を変更してみましょう。

テキスト付きの段落

テキスト付きの段落

それらの。 これで、XYZクラスとそのために記述されたルールができました。

Xyz（色：青）

段落テキストを青に着色しました。 この例では、次のことをさらに強調しています。 クラス属性の名前どれでも使用できます。 ただし、続けましょう。

CSSでタグセレクターとクラスセレクターがどのように使用されるかの例をもう一度見てみましょう。 次のスタイルルールがあると想像してみましょう。

Div（色：赤）div.a123（色：緑）.xyz（色：青）

また、Htmlコードに次の要素があることを想像してください。

指定されたセレクターに規定されたルールに従って、Htmlコードの指定された要素のコンテンツは次のようになります。

次に、これがブラウザがHtmlコードのこれらの要素のスタイルを解釈する方法である理由を見てみましょう。 クラスが記述されていない最初のコンテナDivには、すべてのコンテナに適用されるCSSルールが適用されます：div（色：赤）。 そのため、内容は赤になります。 表示する必要があるもの。

2番目のDivのタグには、クラス「a123」が登録されています。 この場合、「div.a123」に対応するCSSルールが適用されます（class = "a123"属性が記述されたDivタグがあるため）。 したがって、2番目のコンテナの内容は緑色になります。

ただし、最初のCSSルール「div（色：赤）」は、例外なくすべてのコンテナーを対象としているため、2番目のDivにも適用できることに気付いたと思います。 それは矛盾を発見し、それは概念を導入することによってCSSで解決されます。

これについては後で詳しく説明しますが、今のところ、「div.a123」（この例では2番目のDiv）の優先度が高くなると言います。

ちなみに、この例の3番目のDivでも同様の状況が発生します。 「div」タグセレクターと「.xyz」クラスセレクターの2つのオプションを同時に使用できます。 繰り返しになりますが、まだ説明していませんが（上記のリンクでこれについて読んでください）、後者の優先度が高くなるため、3番目のコンテナーの内容は青色になります。

次へ移りましょう。 上記の例では、次の段落タグPがあり、class = "a123"と記述されています。 この要素は、私たちが書いた3つのセレクターのいずれにも該当しないことがわかりました（3つすべてがそれを見逃しました）。

2番目のオプションと重複しているだけですが、このセレクターはクラス「a123」の「Div」タグにのみ使用され、段落タグPには使用されません。その結果、この段落のテキストの色はデフォルトのままになります。 NS 黒。

さらにこの例では、class = "xyz"の段落要素があります。 最後のCSSルール「.xyz（色：青）」が適用されます。 したがって、この段落のテキストは青色になります。 ここでは、すべてが明確だと思います。

汎用セレクターと一意のID

それでは、すでに述べたIDに移りましょう。 CSSコードに何かが表示されたとき フロントグリッド（ハッシュ）、これは、Idを処理していることを意味します。

通常、このセレクターは書かれています タグに言及せずに、それが参照している（上記の例の最初のオプション）。ただし、2番目のスペルオプションも使用できますが、使用されることはめったにありません。 これは、コード内のId属性の値が一意になるためです。つまり、同じId値を持つ2つの要素が存在することはできません。 それらの。 禁止されていませんが、指定しても意味がありません。

したがって、通常はハッシュ（格子）を書き込み、その直後にId属性の値（名前）を書き込みます。 Idに次のルールがあるとします。

#back（色：赤）

コードには次のスニペットが含まれています。

これは、「＃back」の後にルールを適用した結果、ブラウザによって次のように解釈されます。

一意のIDを持つDivコンテナ

また、CSSは アスタリスクで示されるユニバーサルセレクター、これは、このルールがコード内のすべての要素に一般的に適用されることを示しています。

*（色：黒）

この場合、タグで囲まれたテキストは黒（デフォルトの色）になります。 他のすべてのセレクター（タグ、クラス、ID）がユニバーサルセレクターよりも優先されることは明らかです。

現代のCSSにおける属性セレクターとその将来

上記のすべてのオプション（タグ、クラス、ID、および汎用）は、すべてのブラウザーで機能します。 しかし、どこでも機能しない他のオプションがあります。

このタイプには属性セレクターが含まれています。これは非常に便利で、大幅に拡張できると同時に、ポイントアクションの可能性を簡素化しますが、残念ながら、 すべてのブラウザで100％サポートされているわけではありません.

おそらく覚えていると思いますが、タグ内のHtml言語では、これらの要素自体のコンテンツに特定のプロパティを与えることができるさまざまな属性を使用できます。 したがって、CSSのセレクターとしてタグ名だけでなく、属性名も使用するのが論理的です。

実際、クラスとIDを検討したときに、これらは本質的に一部のタグの属性であったため、すでにこれを実行しました。 AidiとKlassはレイアウトにおいて非常に重要であり、それぞれ独自の構文を持つ別々のグループに分けられただけです。

そして、セレクターでHtml言語（IDでもクラスでもない）に存在する他の属性をどのように使用するのですか？ 非常に簡単- それらを角かっこで囲みます:

（色：緑）

これで、「タイトル」を持つHtmlコードのタグは、テキストの色が緑色になります。

私の意見では非常に便利です。 しかし、属性セレクターを使用する際の全体的な問題は、 IE6以下では機能しません一般的に、またはそれらは機能しますが、部分的にのみです。 IE 6を使用してインターネットをサーフィンするユーザーの割合がゼロになるまで、この便利な方法がレイアウトで広く使用される可能性は低くなります。 しかし、それにもかかわらず、あなたはそれらの存在について知り、それらを使用できるようにする必要があります。

例からわかるように、セレクターで指定された属性に値があるか、空であるかは関係ありません。 しかし、これは彼と一緒にできることのすべてからはほど遠いです。これはただの歌だからです。

あなたはそれらの中で示すことができます 属性の名前だけでなく、その値も:

（色：緑）

その結果、このようなセレクター用に記述されたCSSルールは、値が「最初の段落」の「タイトル」を持つタグにのみ適用されます（この例では、これは2行目になります）。

説明されている例は厳密な等式でしたが、このセレクターは次のように記述できます。

（色：緑）

それか。 このCSSルールは、「タイトル」に「段落」という単語が含まれるHtmlコードの要素にのみ適用されます（この例では、これらは2行目と3行目になります）。

属性セレクター構文は解釈します «~=» 「単語全体が含まれている」として。 たとえば、title = "（！LANG：2番目の段落の要素の場合" CSS правило «color:green» уже применяться не будет.!}

しかし、代わりに置くことができます «*=» 次に、セレクターで指定された個々の単語だけでなく、単語の一部（属性の任意の場所に含まれるテキスト）も考慮されます。

（色：緑）

この場合、title = "（！LANG：2番目の段落" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» （括弧内の値で始まるもの）。これは、次のような属性セレクターの作成に役立ちます。

（赤色）

属性が示すことであることをおそらく覚えているでしょう。 そのため、サイトの内部リンクは相対的なものになることがよくあり、外部リンク、そうでない場合は絶対的なものにする方法は機能しません。

したがって、すべての外部リンクは「http」で始まり、内部リンクは「http」を使用せずに相対形式で指定できます。 それか。 この例で記述されたセレクターは サイト上のすべての外部リンクに色を付ける（すべて絶対）赤で。 「http」を含まない相対的なものは、デフォルトの色のままになります。 私の意見では、スーパー!!!

ご覧のとおり、属性セレクターには多くの可能性があり、まだ広く使用されていないという事実は、非常に貧しくて気分を害している会社Melkosoft、特にその発案者であるIE6のメリットです。 CSSで、そしてすぐに、もちろん、彼らの人生に道を開くでしょう。

はい、もう1人のオペレーターがいます «$=» -引用された値で終わるもの：

（色：緑）

その結果、最初の例の2行目と3行目は緑色になります。 値「title」は「raf」で終わります。 これは、IE 6ユーザーの特定の割合がなければ、属性セレクターが最新のCSSでうまく機能する方法です。

実際、すべてのタイプのうち、2つだけを考慮する必要があります。 しかし、それを次の記事に持ち越したいと思います。そこでは、それらのさまざまな組み合わせについても説明します。

頑張って！ ブログサイトのページでお会いしましょう

あなたは興味があるかもしれません

CSSの疑似クラスと疑似要素のセレクター（ホバー、最初の子、最初の行など）、Htmlコードのタグ間の関係
Cssの優先順位と重要なセレクターの組み合わせとグループ化、カスタムスタイルと作成者スタイルによるブースティング
リストスタイル（タイプ、画像、位置）-HTMLコードでリストの外観をカスタマイズするためのCssルール
CSSの背景（色、位置、画像、繰り返し、添付ファイル）-すべてHtml要素の背景色または背景画像を設定するため
CSS-それは何ですか、スタイルとリンクを使用してカスケードスタイルシートをHTMLコードにリンクする方法
サイズ単位（ピクセル、Em、Ex）とCSSルールの継承
CSSとは何ですか、カスケードスタイルシートをHtmlドキュメントに接続する方法、およびこの言語の構文の基本
パディング、マージン、ボーダー-CSSで内側と外側のマージン、およびすべての側面（上、下、左、右）の境界を設定します n番目の子の疑似クラスを使用して、サイト上のテーブル、リスト、およびその他のHTML要素の行の背景色を交互に設定する方法
サイトのCSSファイルで未使用のスタイルライン（追加のセレクター）を見つけて削除する方法
CSSでの表示（ブロック、なし、インライン）-WebページでのHtml要素の表示の種類を設定します

サイトを作成するときに、例外なく、ページにあるすべての要素に特定のスタイルを適用する必要がある場合があります。 このタスクを実行するために、ユニバーサルセレクターが使用されます。

説明

「*」記号で示されます。 その助けを借りて、目的やネストを修正することなく、ページ上のすべてのタグを一度に選択できます。 例えば：

*（フォントサイズ：18px;）

このエントリでは、テキストを含むすべての要素に18ピクセルのフォントの高さを指定しました。

それを詳しく見てみましょう。 CSSの2番目のバージョンまで、ユニバーサルセレクターはありませんでした。 それはすべての要素に一致するので、それが持つスタイルは同時にそれらに適用されます。 このセレクターを使用するときは十分に注意してください。 この注意は、スタイルの継承が困難になる可能性があるため、または予測できない動作が原因で発生します。

また、クラス、識別子、属性を使用すると、害を及ぼすことなくユニバーサルセレクターをスキップできることにも注意してください。 例えば：

*。 左（境界線：1px実線＃000;）。 左（境界線：1px実線＃000;）

これらのエントリは同じセマンティック負荷を持ち、スタイルはユニバーサルセレクターの有無にかかわらず同じ方法で適用されます。

どこに適用できますか？

基本的に、ユニバーサルセレクターは、デフォルトのブラウザースタイルをゼロにするときに実際に見つかります。 たとえば、パディング、フォントサイズなどです。

ただし、この方法は単純であり、コードの長さも大幅に短縮されますが、いくつかの欠点があります。

標準スタイルをドロップするときのユニバーサルセレクターのデメリット：

• 一部のスタイルはリセットできません
• select属性の場合、パディングをゼロにすることはできません
• ほとんどのブラウザでボタンの標準的な外観を「殺す」ことができます
• Mozilaはブラウザのマイナーなバグで動作します
• Mozilaのページの読み込みが大幅に遅くなります（ただし、これはCSSが1,000行を超えるサイトに適用されます。それ以外の場合、遅延は表示されません）。

上記の理由により、タイプセレクターを使用して要素ごとにスタイルをダンプすることをお勧めします。 スタイルをリセットするための同様のコードの例を最後に示します。

一般的なCSSセレクターは、スタイルが例外なくすべての要素に適用されることを指定しているため、おそらく最も理解しやすいものです。 ユニバーサルセレクターは、アスタリスク（*）の1文字のみで構成されます。一般的な構文は次のとおりです。

* { プロパティ：値; プロパティ：値; ...）

CSS汎用セレクターの使用例

段落1

パラグラフ2

パラグラフ3

ブラウザでの結果

段落1

パラグラフ2

パラグラフ3

この例では、ページ要素の余白、パディング、および境界線が削除されています。 それはなんのためですか？ レッスンですでにご存知のとおり 、一部のHTML要素には、最初は一部のプロパティの特定の値があります。たとえば、段落にはゼロ以外の空白の上下の余白があり、画像リンクにはフレームがあります。 ただし、すべてがそれほど単純なわけではありません。実際のところ、ブラウザによってこれらのフィールドのサイズがわずかに異なる場合があり、画像リンクのデフォルトフレームを長期間設定していないものもあります。 そして、これらはすべて可能な違いではありません。

したがって、多くのレイアウト設計者（そしてあなたは今正確にレイアウトを学んでいます）はいわゆる「CSSスタイルのリセット」を作成します。つまり、スタイルシートの最初で、ゼロ以外のすべての可能なCSS値をリセットします。プロセスでは、要素にスタイルを追加しますが、もちろん、独自の意味を持っています。 このようにして、HTMLページがすべてのブラウザで同じように見えることを確認できます。

ユニバーサルセレクターはスタイルをリセットするために使用されることがよくありますが、一部のタグセレクターをコンマで区切ってリストすることを好む人もいれば、リセットをまったく使用しない人もいます。 どのように行動するかはあなた次第ですが、いずれにせよ、それについて考えるのは時期尚早です。 そして、時間の経過とともに、独自のスタイルのライティングスタイル（トートロジーについては申し訳ありません）を開発するので、気にしないでください。

宿題。

ここではすべてがあまりにも明白なので、ユニバーサルセレクターで宿題をすることに意味がありません。少し違うことをしましょう。

1. 段落のように見えるようにタグのスタイルを変更します。 これに必要なプロパティは、自分で考えてください。
2. 長い引用符のハイライトタグのように見えるように段落タグを変更します。
3. タグをインライン要素からブロック要素に変換します。 このためのプロパティを使用します