👋

CSSの詳細度:CSSを思い通りに書こう!

2023/10/31に公開

CSSを正しく記述しているのに反映されない!
その時は詳細度を疑ってみよう!

https://youtu.be/SPBMzUgs95A

CSSは、基本的に後から書いたものが優先されるが・・・

ピンポイントで指定すればするほど優先される


※()の中は例


要素セレクタとclassセレクタを比べる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>詳細度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title">詳細度のテスト</h1>
</body>
</html>

style.css

/* クラスセレクタ */
.title{
    color:blue;
}

/* 要素セレクタ */
h1{
    color:red;
}

クラスセレクタとIDセレクタを比べる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>詳細度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title" id="title">詳細度のテスト</h1>

</body>
</html>
/* IDセレクタ 100点*/
#title{
    color: green;
}

/* クラスセレクタ 10点*/
.title{
    color:blue;
}

!importantはどれよりも最優先される

例)赤文字にしたい

/* IDセレクタ 100点*/
#title{
    color: green;
}

/* クラスセレクタ 10点*/
.title{
    color:blue;
}

/* 要素セレクタ 1点*/
h1{
    color:red !important;
}

子孫セレクタと要素セレクタではどうなる?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>詳細度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title" id="title">詳細度のテスト</h1>

    <article>
        <h2>趣味</h2>
    </article>

</body>
</html>

以下を追記

/* 子孫セレクタ 2点*/
article h2{
    color:red;
}

/* 要素セレクタ 1点*/
h2{
    color: blue;
}

詳細度の計算サイト
Specificity Calculator

問題:どっちが詳細度(優先度)高い?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>詳細度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title" id="title">詳細度のテスト</h1>

    <article>
        <h2>趣味</h2>
        <ul class="hobby">
            <li>カメラ</li>
            <li>サッカー観戦</li>
        </ul>
    </article>

</body>
</html>

以下をCSSに追記

.hobby li{
    color:brown;
}

ul li{
    color:orange;
}





本格的なWEBサイトを作ったことのないあなた!作ってみませんか?

https://zenn.dev/codek2/articles/f8f03a9bd73a22

Udemyで講座を公開中!
https://zenn.dev/codek2/articles/e9e44f3e0023fb

Discussion