GrabzItでCSSセレクターを使用する

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

より多くの記事コミュニティの質問