詳解CSS セレクター編

要素セレクタ、クラスセレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- <h1>見出し</h1> -->
  <h1 class="info title">見出し</h1>
  <p class="info">こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <h2>見出し</h2>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</body>
</html>

/* h1 { */
.info {
  color: skyblue;
}

.title {
  font-weight: normal;
}

idセレクタ、全称セレクタ

#title {
  color: pink;
}

* {
  font-size: 12px;
}

属性セレクタ

<body>
  <ul>
    <li><a href="https://dotinstall.com" target="_blank">dotinstall</a></li>
    <li><a href="https://twitter.com/dotinstall" target="_blank">Twitter</a></li>
    <li><a href="https://facebook.com/dotinstall">Facebook</a></li>
    <li><a href="#top">TOP</a></li>
  </ul>
</body>

[target] {
  color: red;
}
[href="#top"] {
  font-size: 24px;
}
[href^="https"] {
  background-color: aqua;
}
[href$="dotinstall"] {
  color: yellow;
}

[href*="com"] {
  font-weight: bold;
  font-size: 12px;
}

セレクタ　組み合わせ

p + p は先頭のpには適用されないことを利用してよく使われる

.info, p
h1.info
main > h1
main h1
p + p pの直後のpから適用

li + li {
  background-color: red;
}

疑似要素　before, after

カスタムデータ属性併用

js, phpでここにデータを埋め込んで使ったりする

<body>
  <h1 data-subtitle=" - Main Title">見出し</h1>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <h2 data-subtitle=" - Sub Title">見出し</h2>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
</body>

h1::before,
h2::before {
  content: '---';
}

h1::after,
h2::after {
  content: attr(data-subtitle);
}

擬似クラス

hover擬似クラス

<body>
  <h1>見出し</h1>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <h2>見出し</h2>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <div class="btn">OK</div>
</body>

.btn {
  width: 100px;
  background: skyblue;
  text-align: center;
  padding: 4px;
  color: white;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.8;
}

nth-child 疑似クラス

<body>
  <main>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
  </main>
</body>

main > :nth-child(2) {
  color: red;
}
main > :nth-child(3n) {
  color: blue;
}
main > :nth-child(odd) {
  background-color: pink;
}
main > :nth-child(even) {
  background-color: skyblue;
}
main > :first-child {
  font-size: 24px;
}
main > :last-child {
  color: white;
}

nth-of-types 擬似クラス

同じ要素の中で種類を考慮しながら順番を指定できる

<body>
  <main>
    <h1>見出し</h1>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
  </main>
</body>

main > h2:nth-of-type(3) {
  color: pink;
}

main > h2:nth-of-type(even) {
  background: rgb(192, 255, 212);
}

main > h2:first-of-type {
  color: yellow;
}

main > h2:last-of-type {
  color: skyblue;
}

empty, not 擬似クラス

注意点として、半角スペースや改行などもempty判定はされないことに注意

<body>
  <ul>
    <li>項目</li>
    <li></li>
    <li> </li>
    <li>

    </li>
    <li><!-- コメント --></li>
    <li>項目</li>
  </ul>
</body>

li:empty {
  color: red;
}

li:not(:empty) {
  background: skyblue;
}

詳細度

id
class
疑似要素

id * n > class * n > 疑似要素 * n
importantはそれよりも優先される
<style> タグはさらに優先される

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section id="about">
    <h1 id="main" class="title box" style="color: skyblue;">Main Title</h1>
  </section>
</body>
</html>

#about > #main { color: gray; }
h1 { color: red !important; }
h1#main.box { color: yellow !important; }
section > #main.title { color: blue; }
section#about > h1 { color: pink; }