DOM操作に使用するCSS主要セレクタ一覧

タグ名 {
  属性: 値;
}

p {
  color: green;
  font-weight: bold;
}

.class名 {
  属性: 値;
}

.my-class {
  color: green;
  font-weight: bold;
}

#id名 {
  属性: 値;
}

#my-id {
  color: green;
  font-weight: bold;
}

セレクタ1, セレクタ2, セレクタ3[, ...] {
  属性: 値;
}

/* pタグと、my-idというIDを持つ要素、my-classというclassを持つ要素にスタイルを適用 */
p, #my-id, .my-class {
  color: green;
  font-weight: bold;
}

要素.closest( セレクタ )

/* closest-elemというIDを持つ要素に最も近い親 */
element.closest( '#closest-elem' )

親要素 子孫要素 {
  属性: 値;
}

/* my-idというIDを持つ要素の下にあるp要素すべて */
#my-id p {
  color: green;
  font-weight: bold;
}

親要素 > 子要素 {
  属性: 値;
}

/* my-idというIDを持つ要素の直接の子要素としてのp */
#my-id > p {
  color: green;
  font-weight: bold;
}

セレクタ1 + セレクタ2 {
  属性: 値;
}

/* user-nameというIDを持つ要素の直後にあるli */
#user-name + li {
  color: green;
}

セレクタ1 ~ セレクタ2 {
  属性: 値;
}

/* user-nameというIDを持つ要素の後にあるすべてのli */
#user-name ~ li {
  color: green;
}

セレクタ[属性名:値] {
  属性: 値;
}

/* inputタグで、name属性が「user-name」 */
input[name="user-name"] {
  color: green;
}

セレクタ:hover {
  属性: 値;
}

/* my-idというIDを持つ要素にマウスをホバーした */
#my-button:hover {
  color: green;
  font-weight: bold;
}

セレクタ:nth-child(n) {
  属性: 値;
}

/* ulの中で2番目のli */
ul li:nth-child(2) {
  color: green;
  font-weight: bold;
}