CSSセレクタ。 セレクタの種類

を使用すると、特定の色を設定したいそれぞれの、があります。 どのようにそれを行うには？ 標準のCSSセレクタは、彼らが一度にすべてのブロックのパラメータを示し、タグには適していません。 解決策は単純です。 クラスのメンバーを割り当てます。 クラス=「青」、第三- -クラス=「グリーン」、例えば、最初の「赤」、第二= DIVクラスを受けました。 今、彼らはCSSのテーブルを使用して選択することができます。

構文は次のとおりである：（「」）のポイントを示し、クラスの名前を書くことで続きます。 最初のユニットを管理するには、.red建設を使用しています。 第二に-ように.blueと。

重要！ class属性の意味のある値を使用することをお勧めします。 音訳（例えば、krasiviy-BLOK）または文字/数字（ojfh834871）のランダムな組み合わせを使用することが悪いフォームと考えられています。 このコードでは、あなたはあなたの後のプロジェクトに従事される人々に直面するだろう難しさはもちろんのこと、混乱にバインドされています。 最良の選択肢-などBEMなど、任意の方法を使用します。

利点-比較的高い柔軟性を提供します。

欠点 - 複数の要素は、それらが同時に編集されることを意味し、同一クラスであってもよいです。 問題は、プリプロセッサの方法論だけでなく、継承を使用して解決されます。 彼らは大幅に作業を簡素化し、あなたの手以下、SASSまたはいくつかの他のプリプロセッサを取得してください。

IDセレクタ

このバージョンについて意見コーダとプログラマがあいまいです。 CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. 不正確なアプリケーションでは、彼らは相続の問題を引き起こす可能性がありますので、 一部の CSS チュートリアル では 、ID の使用はお勧めしません 。 しかし、多くの専門家が積極的にレイアウト全体でそれらを整理しています。 あなたが決めます。 # »), затем имя блока. その後、 ポンド記号（「＃」）、 ブロックの名前を ：構文は次のとおりです 。 #red. 例えば、#red。

отличается от класса по нескольким параметрам. IDは、 いくつかの点でクラスと異なっています。 ID. まず、ページは、2つの同一の ID にすることはできません 。 彼らはユニークな名前が割り当てられています。 第二に、そのような選択は、より高い優先順位を有します。 red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. これは、あなたが 赤の ユニットクラスを指定 し、CSS の テーブルに 赤 を指定し た場合ことを意味し 、背景色を、 その後、 青色の それに同じ IDを 割り当てる と青の色を指定し、ユニットが青色に変わります。

利点-あなたがタグとクラスのスタイルを無視して、特定の要素を制御することができます。

ID и class. 欠点- ID と クラス の多数で迷子やすいです 。

重要！ ID вам, в общем-то, не нужны. あなたは あなたに BEMの方法論（またはその類似体）、ID を 使用している場合は 、一般的には、必要とされていません。 この技術ははるかに便利なレイアウトのユニークなクラスの使用を含みます。

ユニバーサルセレクタ

{}. 構文：若手記号（ "*"）と括弧、すなわち、{*} ...

ページのすべての要素いったん特定の属性を割り当てるために使用します。 これは有用な場合？ box-sizing: border-box. たとえば、ページのプロパティボックス のサイズ変更 設定する場合 ：ボーダー・ボックスをオンにします。 div *{}. できるだけでなく、文書のすべてのコンポーネントを管理するために使用することなく、指定されたブロックのすべての子を制御するために、例えば、 のdiv * {}。

利点-あなたは一度に多数の項目を制御することができます。

短所-柔軟なオプション十分ではありません。 また、いくつかのケースでは、このセレクタの使用は、ページの作業を遅らせます。

属性によって

特定の属性を持つ要素を制御することを可能にします。 たとえば、異なる属性タイプと入力タグの数を持っています。 そのうちの一つ-テキスト、二-パスワード、三-数。 もちろん、あなたが各クラスやIDを設定することができますが、それは常に便利ではありません。 属性のCSSセレクタは、それが可能な最大精度で特定のタグの値を指定します。 たとえば、次のように：

入力[タイプ= 'テキスト'] {}

このセレクタは、入力テキストのタイプを持つすべての属性を選択します。

ツールは非常に柔軟であり、属性が存在することが可能なタグのいずれかと共に使用することができます。 それだけではありません！ CSSの仕様は、より利便性の要素をコントロールする能力を持っています！

あなたのページには、属性のプレースホルダ=「名前を入力します」と入力プレースホルダは=「パスワードを入力します」との入力を持っていることを想像してみてください。 彼らはまた、セレクタを使用して選択することができます！ これを行うには、次の構造を使用します。

入力[プレースホルダ=「名前を入力してください」] {}または入力[プレースホルダ=「パスワードを入力してください」]

属性を持つおそらく、より柔軟な仕事。 あなたが同様の属性のタイトル（例えば、「カスピ海」と「カスピ海」）とタグの数を持っているとしましょう。 両方を選択するには、次の選択を使用します。

[タイトル* = "Kaspiysk"]

CSSは、「カスピ海」、すなわち。E.、そして「カスピ海」と「カスピ海」のシンボルが存在しているのタイトル内のすべての項目を選択します。

また、特定の文字属性で始まるタグを選択することができます。

[タイトル^ = "あなたがしたい文字"] {}

またはそれらを終了します。

[タイトル$ = "右の文字"] {}。

長所-最大の柔軟性。 あなたは、クラスいじりせずに既存のページ要素を選択することができます。

短所-のみ特定の例では、比較的まれにしか使用されません。 ポイントのクラスが多数配置することがより簡単であるため、多くのWebデザイナーは、方法論に好む 角括弧 「等しい」と看板を。 また、これらのセレクタは、Internet Explorerバージョン7および以下では動作しません。 しかし、今、古いInternet Explorerを必要とする誰ですか？

擬似クラスセレクタ

擬似状態素子です。 たとえば,:ホバーのために-あなたはホバー時にページの一部に何が起こるか,:訪問-訪問のリンクを。 最初の子と：最後の子それはまたのような要素を含んでいます。

それのおかげであなたはJavaScriptを使用せずに「ライブ」のページを作ることができるので、セレクタのこのタイプは積極的に、近代的なレイアウトで使用されています。 たとえば、あなたがその色を変更BTNのクラスにボタンにカーソルを合わせるとことを確認します。 これを行うために、我々は次の構造を使用します。

.btn：ホバー{

背景色：赤。

}

この場合、ボタンが瞬時赤面ず、半秒以内-美しさは、例えば、0.5秒、ボタン、転移性の基本的なプロパティで指定することができます。

徳は-広くページの「復活」のために使用されています。 使いやすいです。

短所 - 彼らはありません。 これは本当に便利なツールです。 しかし、経験の浅いウェブデザイナーは、擬似クラスの豊富で迷子になることができます。 問題は、研究と実践を解決しています。

擬似セレクター

「疑似」 -これらはHTMLに含まれていないページの一部である、彼らはまだ管理することができます。 あなたは理解していませんでしたか？ それはそれはそうよりもはるかに簡単です。 たとえば、あなたが他の小さなと黒のテキストを残して、文字列の最初の文字が大きいと赤にしたいです。 もちろん、それは特定のクラスとのスパンでその手紙を締結することができますが、それは長くて退屈です。 段落全体を選択して、擬似::最初の文字を使用する方がはるかに簡単です。 これは、最初の文字の外観を制御する機会を与えてくれます。

擬似要素の非常に多数存在します。 成功する可能性は低いです単品でそれらを一覧表示します。 あなたのお気に入りの検索エンジンで関連情報を見つけることができます。

利点-ページの外観をカスタマイズするための柔軟性を提供します。

短所 - 彼らに新しいことが多い混乱しています。 唯一の特定のブラウザではこの種の作業の多くの選択肢。

要約します

セレクタ-ドキュメントフロー制御のための強力なツール。 彼のおかげで、あなたはページのすべての単一のコンポーネントを選択することができます（一部のみでもあります）。 利用できるすべてのオプションを学ぶ、あるいはそれらを書き留めてください。 あなたはインタラクティブな要素のモダンなデザインとたくさんの複雑なページを作成する場合、これは特に重要です。