More than 1 year has passed since last update.

CSSセレクタのさまざまな設定方法

Posted at 2023-10-31

アジェンダ

以下に、CSSセレクタのさまざまな設定方法とそのコード例をまとめます。

タグセレクタ:特定のHTMLタグにスタイルを適用します。

p {
    color: blue;
}

クラスセレクタ: .クラス名 の形式で、HTMLのclass属性に一致する要素にスタイルを適用します。

.button {
    background-color: red;
}

IDセレクタ: #ID名 の形式で、HTMLのid属性に一致する要素にスタイルを適用します。

#header {
    height: 100px;
}

複数セレクタの適用: カンマで区切ることで、複数のセレクタに同じスタイルを適用。

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

CSSで複数のclass名を指定: カンマ、半角スペース、または繋げて記述することで、複数のclass名を指定します。

.text.large {
    font-size: 24px;
}

子孫セレクタ: 親セレクタ子セレクタ の形式で、特定の親要素の下にある子要素にスタイルを適用します。

article p {
    font-size: 16px;
}

子セレクタ: 親セレクタ > 子セレクタ の形式で、直接の子要素のみにスタイルを適用します。

ul > li {
    list-style-type: square;
}

隣接兄弟セレクタ: セレクタ1 + セレクタ2 の形式で、セレクタ1の直後にあるセレクタ2にスタイルを適用します。

h2 + p {
    margin-top: 10px;
}

一般兄弟セレクタ: セレクタ1 ~ セレクタ2 の形式で、セレクタ1の後にあるすべてのセレクタ2にスタイルを適用します。

h2 ~ p {
    color: gray;
}

擬似クラス: :擬似クラス名 の形式で、特定の状態や位置にある要素にスタイルを適用します。
以下にいくつか例をあげます。

:hover: 要素にマウスカーソルが乗ったときにスタイルを適用。

a:hover {
    text-decoration: underline;
}

:nth-child(): 子要素の中での位置に基づいて要素を選択。

li:nth-child(odd) {
    background-color: lightgray;
}

:nth-of-type(): 特定のタイプの子要素の中での位置に基づいて要素を選択。

p:nth-of-type(2) {
    font-weight: bold;
}

擬似要素:　擬似要素は、実際にはDOMに存在しない要素を表現するためのセレクタです。

::before: 要素の内容の前にコンテンツを追加。

p::before {
    content: "開始";
}

::after: 要素の内容の後にコンテンツを追加。

p::after {
    content: "終了";
}

属性セレクタ: [属性] の形式で、特定の属性を持つ要素にスタイルを適用します。

input[type="text"] {
    border: 1px solid black;
}