CSS セレクターはターゲット要素で使用され、要素を非表示にし、要素機能が XNUMX つ以上の HTML 要素を識別するのを待ちます。 CSS セレクターの主な XNUMX つのタイプは、ID またはクラスのいずれかによって選択することです。 以下に示すように、HTML 要素に id 属性が含まれている場合、HTML 要素には id が含まれます。
<span id="myidentifier">Example Text</span>
それを選択するには、次のような CSS セレクターを作成します。 #myidentifier
HTML 要素にクラスがある場合は、この例に示すように class 属性があります。
<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)
をクリックして、XNUMX 番目の myclass スパンを選択します。 ただし、親 div 要素の下に他の要素がないため、これはこの場合にのみ機能します。 たとえば、ap 要素があった場合、n 番目の子のインデックスが変更されます。
選択する必要がある 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