CSSのセレクタを一度、すべての!

「学習/仕事」の間、多くが直面したかもしれないという質問/問題は、彼らが疑わしいか、セレクタを選ぶことについて誤っているということです.彼らは使用するセレクタを知らないので、彼らは刺激的なループで立ち往生し、しばらくの間それを操作しようとした後、彼らはこのアイデアからのバックアップを終了し、代わりに、JavaScriptを使用してDOMの操作になるか、さらに悪い、DOM構造を変更する!
CSSはかなりの種類のセレクタを持っていますが、それらのすべてが実際に定期的に使用されるわけではありません.いくつかは、自分の名前で決定することができます他の人が謎のままですが、';emのすべてを知る必要はありません特定の使用方法があります.この記事の目的は、指摘し、一度、すべてのために最も有用なセレクタを説明することです!

You can see a general diagram of the most used and important selectors below but before we talk about them you should know that I have not mentioned the class and ID selector ( ‘ . ‘ , ‘ # ‘ ). So if you don’t already know about these two, instead of reading this article I recommend you to start with the basics of CSS.

子孫セレクタ
この1つを使用するには、特定の文字を使用する必要はありません.それは要素の間のスペースです、そして、それは問題の要素のすべての子孫を選びます.
想像する


質問:どの段落が適用されるスタイルですか?
回答:すべてに
子孫セレクタを使用している場合、要素のインデントは重要ではなく、主なラッパーの子孫である必要があります.
したがって、以下の状況においてさえ、それらが「POST」の子孫である限り、スタイルは段落に適用されます.

2 )直接子セレクタ(>
親要素への子要素として直接記載されている要素だけが選択されます.
直近の子セレクタで書き直された最後の例を見てください.


質問:どの段落が適用されるスタイルですか?
セクションタグの後の最初の段落とセクションタグを閉じる前の最後の
兄弟セレクタ
3.1 )一般的な兄弟セレクタ(~)
このセレクタを使用した後に、同じ親を持っている場合に限り、“~”(同じ種類の)の右側のすべての要素が選択されます.


質問:どの段落が適用されるスタイルですか?
回答:第19項
選択した段落は
要素「H 1」の後に来てください
"H 1 "と同じ親
上記の2つの条件がパラグラフ1 , 5 , 9 , 15 , 23に該当しないので、スタイルは適用されません.
なぜ?1行目、5行目、9行目は「H 1」の前に置かれる.
行15、23:“H 1”の後に来るが、“H 1”と同じ親を持たない.
3.2 )隣接した兄弟セレクタ(+)
このセレクタを使用すると、"+"の右側の最初の要素だけを選択します.したがって、最後の例でこのセレクタを使用した場合、段落のどれも選択されません.しかし、私たちが“H 1”の直後に段落の数を持っていたならば、どれだけ多くの場合、最初のものだけが選ばれるでしょう.


質問:どの段落が適用されるスタイルですか?
答え:「H 1」の後のちょうど1(第14項)
属性存在セレクタ
HTMLタグにはCSSで使用できる属性がたくさんあります.
例えば、


上の例では、“href”、“type”、“id”属性を使いましたが、“form”や“input”のような他のものを使うことができます.
文字$, ^, *はちょっと混乱しているかもしれませんが、2番目に待ちます.
^ =:使用される要素に対して選択された属性は、内部のもの(' ')から始まります.
*:使用される要素に対して選択された属性は、内部にあるものを含みます('')
使用する要素に対して選択された属性は、内部にある(' ')
例を見てみましょう.
最初の項目では、同じ記号を使用し、それは“https://medium.com””が含まれています.このセレクタは、媒体のHREFを正確に含む“A”タグを選択します.
第2の項目では、HREFが「https://nest’」から始まる「A」タグが選択される.
第3の項目では、彼らのHREFが終わる「A」タグ.' org 'が選択されます.
第4の項目では、そのHREFが「Docker」を含む「A」タグが選択される.
第5項目「I」タイプリストが選択されます.
第6の項目では、id「uniquestra div」を持つdivの中のスパンが選択されます.
5 )擬似クラス
擬似クラスは、ある状態や状況で要素にアクセスする必要があるときに使用されます.以下では、最も使用されるものの8つを議論するつもりです.
5.1擬似リンククラス

a:link {…} ~> Links that have not been visited and are in their normal state.

a:visited {…} ~> Links that have been visited.

5.2 )ユーザアクション擬似クラス

a:active‌ {…} ~> the link that is active now

Element:hover {…} ~> the element which the cursor is on now

Element:focus {…} ~> the element that is touched right now

5.3ユーザインタフェース擬似クラス

input:enabled {…} ~> active inputs

input:disabled {…} ~> inactive inputs

input:checked {…} ~> checked checkboxes

input:indeterminate {…} ~> when there are no changes applied to a radio box or a select box

5.4構造と位置擬似クラス

Element:first-child {…} ~> selects the first child

Element:last-child {…} ~> selects the last child

Element:first-of-type {…} ~> the first child of a parent from a specific element

Element:last-of-type {…} ~> the last child of a parent from a specific element

Element:only-child {…} ~> the child is selected only if it’s the only child to the parent element

以下の例では、「唯一の子」を理解するのはちょっと難しいと思います.

div span:only-child {
  color: firebrick;
}

<section>
  <div>
    <span>Text</span>
    <span>Text</span>
    <div>
      <span>This will be selected</span>
    </div>
  </div>
</section>

唯一の選択されたスパンは、divの唯一の子です.
5.5 )数字と式擬似クラス

要素:n番目の子(n):n番目の子が直接選択されます.

要素:n番目の子(an):子供がaの倍数のものです
を選択する.

要素:n番目の子(n + b):これは少し異なります.Bの値を考慮すると、子供たちはB自身とから始まる選択されます.

例:

li:nth-child(n + 4) ~> Selected from the fourth 'li' onwards (the fourth item itself is also selected)

Element : N番目の子(A + B):ここで、Nは0から始まり、Aが乗算された後、Bに加えられ、それから子供が選択されます.

例:

li:nth-child(4n+7){...} ~>(4×0)+7, (4×1)+7, (4×2)+7 = children 11 and 15 are selected.

Element : N番目の子(AN - B):ここでも、Nは0から始まり、Aが乗算された後、Bが減算されます.

li:nth-child(6n-4){...} ~> (6×0)-4, (6×1)-4, (6×2)-4 = children 2, 8, and 14 are selected

5.6空の擬似クラス
ここで、要素は空であるか、単なるコメントを含んでいるか選択されます.しかし、スペースとタブが文字列であるので、空であると考えられないことに注意してください.
例えば、

#post span:empty {…}

<section id=”post”>
  <span></span> ~> This will be selected
  <span> </span> ~> This will not be selected (because of space)
  <span><!--comment--></span> ~> This will be selected
</section>

5.7 .否定擬似クラス
名前によって推測することができるので、このセレクターには、内部に記載されている要素が含まれていません.
このセレクタについての興味深いことは、例えば、以前のものと組み合わせることができるということです.

li:not(.li-elements) {…} ~> a list of items not including the mentioned class

ul li:not(:nth-child(2n)) {…} ~> a list of items are selected that are not multiples of 2.

5.8 )テキスト擬似要素

Element::after {…} ~> using this selector, a pseudo element is added to the end of the selected element, which can have content or/and style. It’s usually used to add an animation or icon for complementary purposes.

Element::before {…} ~> This one is like after, with the only difference being the pseudo elements positioning moved to the beginning of the selected element.

Element::first-letter {…} ~> The first textual character inside our specific element is selected. You must have seen this one in publications websites.

Element::first-line {…} ~> selects the first line of the specific element.

Element::placeholder {…} ~> If the specific element has a placeholder, it’s selected and you can add a style to it.

Element::selection {…} ~> when you select a text in a web page, the selected piece of text has a certain color and background color. Depending on the OS’s user agent there’s a default accent color, for example, it’s blue and white for Windows, orange and white for Ubuntu, and macOS white. 
Bottomline being, this color is changeable and this is made possible using this selector.

例えば、

::selection {
  background:#0f94e9;
  color:#fff
}