意外と知られていない便利な CSS セレクター

CSS セレクターは Web 開発において重要な役割を果たし、Web ページのスタイル設定に使用されます。多くの人は一般的なセレクターに精通していますが、あまり一般的ではないものの、非常に便利なセレクターがいくつかあります。

CSS セレクターとは何ですか?

CSS セレクターは、スタイル設定のために Web ページ上の要素を選択するために使用されるパターンです。属性、クラス、ID などに基づいて要素を見つけることができます。

一般的に使用される CSS セレクター

一般的に使用されるセレクターをいくつか示します:

• 要素セレクター: 特定のタイプのすべての要素をターゲットにします。たとえば、すべての <div> 要素をスタイルするには: <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>クラスセレクター</strong>: 特定のクラスを持つ要素を選択します。 「text-large」というクラスがある場合: </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>ID セレクター</strong>: 特定の ID を持つ要素をターゲットにします。 ID「header」を持つ要素の場合: </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>属性セレクター</strong>: 特定の属性値を持つ要素に使用されます。たとえば、すべての外部リンクのスタイルを設定するには (「rel」属性を使用): </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="珍しいが便利な-CSS-セレクター">珍しいが便利な CSS セレクター</h2> <h3 id="子セレクター-gt">子セレクター (>)</h3> <p>要素の直接の子要素を見つけます。クラス「container」を持つ親要素の場合: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="子孫セレクター">子孫セレクター ( )</h3> <p>これにより、要素内のすべての子孫が選択されます。 ID が「main」の div があり、その中にあるすべての <code><span></span> 要素をスタイルしたい場合:

  <code>#main span {
    color: green;
  }</code>

  隣接する兄弟セレクター ( )

  別の特定の要素の直後に続く要素を選択します。たとえば、<h3></h3> 要素の後に <p></p> 要素がある場合:

  <code>h3 + p {
    font-weight: bold;
  }</code>

  ユニバーサル兄弟セレクター (~)

  別の要素の兄弟要素を見つけます。必ずしも隣接している必要はありません。クラス「item」の div があり、後続のすべての兄弟要素をクラス「detail」でスタイル設定したい場合:

  <code>.item ~ .detail {
    padding-top: 5px;
  }</code>

  部分一致 (^=、$=、*=) を持つ属性セレクター

  • (^=)で始まる: "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a" で始まるすべての画像ソースのスタイルを設定するには:

  <code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
    border-radius: 5px;
  }</code>

  • は ($=) で終わります: メソッドが「post」で終わるすべてのフォームの場合:

  <code>form[method$="post"] {
    background-color: #f0f0f0;
  }</code>

  • *contains (=)**: href 属性に「product」を含むすべてのリンクのスタイルを設定するには:

  <code>a[href*="product"] {
    text-decoration: underline;
  }</code>

  否定疑似クラス (:not())

  特定のセレクターに一致しない要素を選択します。たとえば、クラス「hidden」を持つ要素を除くすべての要素:

  <code>:not(.hidden) {
    display: block;
  }</code>

  ターゲット擬似クラス (:target)

  URL フラグメントが要素の ID と一致する場合。 URL の ID「contact」の部分:

  <code>div {
    border: 1px solid black;
  }</code>

  言語擬似クラス (:lang())

  言語属性に基づいて要素を見つけます。 lang="en-US" を持つ要素の場合:

  <code>.text-large {
    font-size: 20px;
  }</code>

  疑似クラス (:has()) があります

  :has() 擬似クラスは、特定の子要素または子孫要素を含む要素を選択するために使用されます。たとえば、画像を含む div のスタイルを設定するには:

  <code>#header {
    background-color: blue;
  }</code>

  選択疑似クラス (::selection)

  この疑似クラスを使用すると、ユーザーが選択したテキストの部分のスタイルを設定できます。たとえば、ユーザーが段落内のテキストを選択すると:

  <code>a[rel="external"] {
    color: red;
  }</code>

  結論

  これらの珍しい CSS セレクターは、要素を正確に配置しスタイル設定するための追加の方法を提供します。これらは CSS コードの柔軟性と機能を強化し、視覚的に魅力的で適切に構造化された Web ページをより強力かつ効率的に作成できるようにします。

  詳細については、https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

  をご覧ください。