CSSセレクターは、ターゲット要素で使用され、要素を非表示にし、要素機能が1つ以上のHTML要素を識別するのを待ちます。 CSSセレクターの2つの主なタイプは、IDまたはクラスで選択することです。 以下に示すようにid属性が含まれている場合、HTML要素にはidがあります。
<span id="myidentifier">Example Text</span>
それを選択するには、次のようなCSSセレクターを作成します #myidentifier
HTML要素にクラスがある場合、この例に示すように、クラス属性があります。
<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>
それを選択するには、次のようなCSSセレクターを作成します .myclass
クラスの特定の要素を選択したい場合 myclass
この場合、標準のCSSセレクターを使用してそうすることができます n番目の子(2) そのようなセレクター: .myclass:nth-child(2)
2番目のmyclassスパンを選択します。 ただし、親div要素の下には他の要素がないため、これはこの場合にのみ機能します。 たとえば、ap要素がある場合、n番目の子のインデックスが変更されます。
一意のIDまたはクラスのないHTML要素を選択してください
選択する必要があるHTML要素に、ページ内で一意のIDまたはクラスがない場合があります。 これらのHTML要素を選択する場合、より複雑なCSSセレクターが必要です。
<div class="Header">
<a href="https://www.example.com/">
<div>...</div>
</a>
<div class="SearchBar">...</div>
<div class="TagLine">...</div>
</div>
たとえば、上記の例では、リンク内のDIV要素を選択します。 これを行うには、一意のDIVを使用して機能するCSSセレクターを指定する必要があります。 Header
クラス。
div.Header a div
CSSセレクターは、Web開発の標準機能です。 この記事では、 CSSセレクターの使用方法.
複数の一致する要素の処理
CSSセレクターから複数のHTML要素が返され、ターゲット要素を使用している場合、または要素機能を待機している場合、最初に一致した要素のみが使用されます。 ただし、要素の非表示機能を使用している場合、一致するHTML要素はすべて非表示になります。
異なるIDまたはクラスを持つ複数の要素を非表示にしたい場合は、各CSSセレクターをコンマで区切ることでできます。 したがって、たとえば、上記の例のクラスとIDを非表示にするには、次を使用します #myidentifier,.myclass