共通のシナリオのための高度なCSSセレクタ

執筆Andrew Spencer ✏️
CSSは変です.これは、Web開発者が使用する他の言語とは異なり、しかし、それはウェブサイトの視覚表現には、ユーザーが対話する部分に重要です.その最も基本的な形では、CSSは簡単です.例えば、background-color: red 背景が色赤になることを意味します.しかし、巨大なCSSコードベースに取り組んでいる誰もが、それはすぐに非常に複雑で混乱することができます教えてくれます.
CSS Grid , BEM , Dart Sass , CSSについて学ぶ新しい何かが常にあります.それは圧倒的だ!新しいものを見る代わりに、CSSの基本的なビルディングブロックに集中しましょうselector . セレクタのより良い理解、およびより高度な方法でそれを使用する方法では、以下のコードとクリーンなCSSで一般的なシナリオを解決することができます.

セレクターとは

我々が同じページにいることを確認しましょう.エーCSS selector どのようにブラウザを伝えることができますどのような要素もプロパティを適用します.それらは一般的であり、大きいグループの要素に適用されるか、より具体的であり、単一のHTML要素だけに適用される.5つあるtypes of selectors :

Simple selectors HTMLなどの選択を選択するdiv , #id , or .class

Combinator selectors これは「子」のようなコード関係から外れているp > div または"隣接する兄弟"div + div

Pseudo-class selectors などの要素の特定の状態を選択するには:hover , :first-child , or :nth-of-type

Pseudo-elements selectors などの要素の特定の部分を選択する::after , ::selection , or ::first-letter . これらは常にダブルコロン表記法を使用する方法に注意してください:: 単一のコロンを使用する擬似クラスセレクタ

Attribute selectors などの属性を持つ要素を選択するには[class|="class-name"] , [type="text"] , or [target]

つの別々のセレクタが同じ要素のためにスタイルを宣言するのに用いられるならば、より特定のセレクターはあなたのCSSファイルに彼らの順序が何であるかに関係なく勝つでしょう.例えば、クラスセレクタ.class-name のような一般的なHTML要素セレクタより具体的ですspan . あなたがどのようにブラウザーがどのCSSスタイルを適用するかについて決定する方法についての再検討を必要とするならばCSS cascade , 試してくださいquiz.
我々が選択者が何であるかについて理解する今、彼らを効果的に使う方法に飛び込みましょう.あなたはあまり知られてセレクタの利点を取ることができますも、必要なコードの量を減らすためにそれらを組み合わせる!私が私のCSSで使用するより高度なセレクタは、ここにあります.

:nth-last-child(-n + 2)

多くのCSS擬似クラスセレクタがあり、親の関連する要素や子のグループから要素を選択することができます.

<parent>
    <child></child>
    <child></child>
</parent>

がある :first-child , :nth-child , :nth-of-type , とlist goes on . これらのセレクタは、数字を使用して式になったときにさらに強力になりますn カウンターodd , or even . あなたはグループ内の要素の基本的に任意の数を選択する数学を行うことができます.例えば、n 代数的な表現を作成する方法です.So (2n+4) と等価(2*n)+4 4番目の要素から始まるすべての要素を選択します.

(2*0)+4 = 4
(2*1)+4 = 6
(2*2)+4 = 8
(2*4)+4 = 10

これは多くのシナリオで役に立ちます.たとえば、あなただけのスタイルのリスト内の最後の2つのアイテムに必要なことがありますか?これらの2つの要素にクラスを追加することで、HTMLやCSSをより多くすることができます.

.item:nth-last-child(-n+2)

このセレクタを読むことができます.item .” どのように動作するか見てください.-n+2 等しい(-0+2)=2 または2番目から最後の項目、それから(-1+2)=1 または最後の項目、(-2+2)=0 は、(-3+2=-1) これは、子要素の総数について、何も選択しない.2つの要素のみが選択されますn これをカウントダウンさせる.最後の3つの項目を選択したい場合は-n+3 それだけです.これは、HTMLに何も追加せずに、これらの要素を選択することができます!

――（最後の子）

さらに最後の例を取るには:last-child と:not セレクタ.これは、グループ内の最後の要素が異なるスタイルを持つシナリオで役立ちます.ウェブサイトは、しばしば彼らの間に若干のスペースでアイテムのリストを求めます.これらのシナリオの一般的な問題は、グループ内の最後の項目の下の間隔を削除する必要があります.

CSSを使用すると、スタイルに最も一般的なシナリオを最初にして、より具体的なセレクタを持つ任意の裏のシナリオのアカウントを感じることができる.次に、より具体的なセレクタのスタイルは、より一般的なセレクタのスタイルをオーバーライドします.この例では、次のようになります.

.image {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

または、新しいクラスをHTMLに追加したかもしれませんBEM CSS structure . こうすると、

.image {
  margin-bottom: 2rem;
}

.image--last {
  margin-bottom: 0;
}

両方のパスは、コードとオーバーライドプロパティの7行になります.残念ながら、CSSをプログラミング言語として選択し、論理プログラムを「プログラム」とすると、CSSを以下のように減らすことができます.

.image:not(:last-child) {
  margin-bottom: 2rem;
}

上記のセレクタを読んで、それは「最後の子供でないイメージを選んでください」と言いますコードの3行とオーバーライドスタイルが悪くない!

要素：ホバー+隣接兄弟

別のシナリオを見てみましょう.時には、ホバリングされる要素とは異なる要素を調整する必要があります.JavaScriptではJavaScriptが簡単に特定の要素を検索することができるので、これはかなり簡単ですtraversing the DOM . しかし、右のHTML構造では、CSSが必要です.
CSSではcombinator selectors 例えば.parent > .child or .element + .general-sibling 異なる要素を対象とする.CSSが行うことができない1つのものは、保護される要素の親である要素を対象としています.ここでは、CSSのターゲットを示す図を示します.

<div>
  <a>
    The element that is hovered
    <span>This is a child, CSS can style this</span>
  </a>
  <span>This is a sibling, CSS can style this</span>
  The "parent" <div> cannot be styled with CSS when the <a> is hovered
</div>

どのように強力な兄弟セレクタを使用するか?2つの兄弟要素を持っていて、2番目の要素のスタイルをスタイルにする必要があるなら、次のようにします.
兄弟セレクタは、フォームフィールドにも使用できます.とlabel:hover + input セレクタと相互作用する<label> 要素は、<input> それは後の兄弟だ<label> .

あなたのターン

あなたがCSSが劣った言語であると思う次の時、もう一度考えてください.それはちょうど.そして、それはイライラすることができますまたはあなたの視点に応じて報酬を与える.CSSやリゾートを諦める前に、HTMLを追加したり、JavaScriptを使ってすべてを吹き出そうとすると、CSSセレクターやプロパティを見てください.チャンスは、あなたのニーズに合わせて使用できるものがあります.

あなたのフロントエンドは、ユーザーのCPUをhoggingですか？

Webフロントエンドがますます複雑になるにつれて、リソース貪欲な特徴はブラウザからますます要求する.クライアント側のCPU使用状況、メモリ使用量、およびすべてのユーザーの生産を監視し追跡することに興味がある場合.try LogRocket.

LogRocket ウェブアプリのDVRのように、あなたのWebアプリやサイトで発生するすべての記録.問題が発生する理由を推測する代わりに、集計することができますし、キーフロントエンドのパフォーマンスの測定については、アプリケーションの状態と一緒に再生ユーザーセッション、ログネットワークの要求を報告し、自動的にすべてのエラーを表面.
Webアプリケーションのデバッグ方法Start monitoring for free.
郵便Advanced CSS selectors for common scenarios 最初に現れたLogRocket Blog .