[CSS] 範囲と指定に関する選択子(全体選択子、要素選択子、孫選択子、子選択子、隣接選択子)

Study / Javascript, Jquery, Css    作成日付 : 2019/12/06 07:27:36   修正日付 : 2020/01/14 18:04:37

選択された要素の基準で隣接された要素や派生(下位)要素を選択する方法に関する記述です。

styleでアスタリスクマーク(*)はすべての要素を選択する方法です。すべての要素はfont-styleや基本padding、marginを設定する時に使いますが、すべての要素に反映があるのでよく使わない選択子です。

そしてstyle設定でタグあるいはidやclass、属性で要素を選択しますが、コンマ(,)を使えば複数選択も可能です。

例えば「p, div」といえばpタグとdivタグを選択することです。

そして孫選択子、子選択子の意味は孫選択子の場合、選択要素の中であるすべての派生タグをいうことで子選択子は選択した直下の派生タグを選択することです。

<a>
  <b>
    <d></d>
  </b>
  <c>
    <e></e>
  </c>
  <f></f>
</a>

上の条件の構造でhtmlが作成したと思えば、aタグの孫要素は「b, c, d, e」タグになるし、子要素は「b, c」にあんることです。

つまり、「a d」の指定みたいに、aとd間にスペースを置くと、aタグの孫要素のdタグを選択することです。

子要素でみると「a > b > d」の選択子になります。


隣接選択子で「+」を使用すれば同じレベルの要素で次(派生ではない)に配置された要素、つまり「b + c」で設定するえば「c」を選択することです。「b + f」の場合はbタグすぐあとで「f」タグがないので何も選択されない結果になります。

「~」の場合は「+」みたいに派生ではなく同じレベルの後で配置された要素ですが、すぐ後ろふくめすべての要素ですね。

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
</head>
<body>
<div id="test">
  <!--　初めの要素 -->
  <div class="p1"><h1>p1</h1></div>
  <!-- 二つ目の要素 -->
  <div class="p2"><h2>p2</h2></div>
  <!-- 三つ目の要素 -->
  <div class="p3"><h1>p3</h1></div>
  <!-- 四つ目の要素 -->
  <div class="p4"><h2>p4</h2></div>
</div>
</body>
</html>

/* idがtestのdivタグの孫要素のh1タグ */
div#test h1 {
  color: red;
}
/* idがtestのdivタグのクラスがp2の子要素のh2タグ */
div#test > .p2 > h2 {
  color: blue;
}
/* クラスがp2とp4の要素 */
.p2, .p4 {
  border: 1px solid #000;
}
/* クラスがp1要素の後にあるdivタグの要素 */
.p1 ~ div {
  background: yellow;
}
/* クラスがp1要素の次にあるdivタグの要素*/
.p1 + div{
  background: red;
}


上の例をみれば初めは孫要素を選択するので.p1のh1と.p3のh3になります。でも.p2のh2の場合は.p2の子要素なので.p4のh2タグは当該事項ではありません。

~を使って+をつかったので先にクラスが.p1タグの後のdivタグの背景をすべて黄色に設定して、p1タグの次の要素を赤色に設定しますね。

◀前の投稿[CSS] 疑似クラス - only-child, only-of-type, empty, empty, root
次の投稿▶[CSS] 疑似要素選択子 - fist-line, first-letter, before, after
#css,#selecteor
「Study / Javascript, Jquery, Css」の他投稿
最新投稿