CSSセレクタ

2024年01月16日(火) 09時35分更新 icon 項目のみ表示/展開表示の切り替え

クラスセレクタ

.クラス名
以下のサンプルは指定したクラス名の属性を赤に設定します。
適用されない 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
.SPAN1{
color: red;
}
</style>
<span>適用されない</span>
<span class="SPAN1">適用される</span>
<span>適用されない</span>
</body>
</html>

IDセレクタ

#ID名
以下のサンプルは指定したID名の属性を赤に設定します。
適用されない 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
#SPAN2{
color: red;
}
</style>
<span>適用されない</span>
<span id="SPAN2">適用される</span>
<span>適用されない</span>
</body>
</html>

複数セレクタ

,で区切ると複数のタグやクラスをまとめて適用できます。

全要素

*で全要素に適用できます。

指定した親要素の指定した子要素(孫要素を含む)に適用

親要素 子要素
以下のサンプルは指定した親要素(クラスで指定)の中の子要素(孫要素も含む)(クラスで指定)を赤に設定します。
適用される
適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV3 .SPAN3{
color: red;
}
</style>

<div class="DIV3">
<span class="SPAN3">適用される</span>
</div>
<span>適用されない</span>
</body>
</html>

子セレクタ{指定した親要素の指定した子要素(孫要素は含まない)に適用}

親要素 > 子要素
以下のサンプルは指定した親要素(クラスで指定)の中の子要素(孫要素は含まない)(クラスで指定)を赤に設定します。
適用される
適用されない
適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV4 > .SPAN4{
color: red;
}
</style>

<div class="DIV4">
<span class="SPAN4">適用される</span>
<div>
<span class="SPAN4">適用されない</span>
</div>
</div>
<span class="SPAN4">適用されない</span>
</body>
</html>

指定した要素に隣接している要素1個に適用

親要素+隣接要素
以下のサンプルは指定した要素(クラスで指定)に隣接する同階層の後ろに並ぶ要素1個を赤に設定します。
適用されない
適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV5 + span{
color: red;
}
</style>

<div class="DIV5">
<span>適用されない</span>
</div>
<span>適用される</span>
<span>適用されない</span>
</body>
</html>

指定した要素に隣接している要素複数に適用

親要素~隣接要素
以下のサンプルは指定した要素(クラスで指定)に隣接し同階層の後ろに並ぶ要素を赤に設定します。
適用されない
適用される 適用される
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV6 ~ span{
color: red;
}
</style>

<div class="DIV6">
<span>適用されない</span>
</div>
<span>適用される</span>
<span>適用される</span>
</body>
</html>

指定した要素の最初の要素に適用

要素:first-child
以下のサンプルは指定した要素(クラスで指定)の最初の要素を赤に設定します。
適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV7 span:first-child{
color: red;
}
</style>

<div class="DIV7">
<span>適用される</span>
<span>適用されない</span>
</div>
</body>
</html>

指定した要素の最後の要素に適用

要素:last-child
以下のサンプルは指定した要素(クラスで指定)の最後の要素を赤に設定します。
適用されない 適用される
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.DIV8 span:last-child{
color: red;
}
</style>

<div class="DIV8">
<span>適用されない</span>
<span>適用される</span>
</div>
</body>
</html>

指定した要素の偶数・奇数個目の要素に適用

要素:ntn-child(番号又はodd,even)
番号は何個目か3nとか3n+1とか指定できます。
以下のサンプルは奇数行及び偶数列の要素の背景を設定します。
名前読み方書き方
いわし魚へんに弱い
さけ魚へんに圭
あじ魚へんに参
まぐろ魚へんに有り
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.TBL9 tr:nth-child(odd){
background-color: #eee;
}
.TBL9 td:nth-child(even){
background-color: #eee;
}
</style>
<div class="hascroll"><table class="TBL9">
<tbody><tr><td>名前</td><td>読み方</td><td>書き方</td></tr>
<tr><td></td><td>いわし</td><td>魚へんに弱い</td></tr>
<tr><td></td><td>さけ</td><td>魚へんに圭</td></tr>
<tr><td></td><td>あじ</td><td>魚へんに参</td></tr>
<tr><td></td><td>まぐろ</td><td>魚へんに有り</td></tr>
</tbody></table></div>
</body>
</html>

指定した要素に隣接している要素に適用

要素:hover
以下のサンプルは指定した要素にカーソルがのった場合に背景を設定します。
hoverのほかに、visited(訪問済みのリンク)、link(未訪問のリンク、active(クリックした瞬間)がある。
名前読み方書き方
いわし魚へんに弱い
さけ魚へんに圭
あじ魚へんに参
まぐろ魚へんに有り
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
.TBL10 td:hover{
background-color: #888;
}
</style>
<div class="hascroll"><table class="TBL10">
<tbody><tr><td>名前</td><td>読み方</td><td>書き方</td></tr>
<tr><td></td><td>いわし</td><td>魚へんに弱い</td></tr>
<tr><td></td><td>さけ</td><td>魚へんに圭</td></tr>
<tr><td></td><td>あじ</td><td>魚へんに参</td></tr>
<tr><td></td><td>まぐろ</td><td>魚へんに有り</td></tr>
</tbody></table></div>
</body>
</html>

属性セレクタ

属性の有無

要素[属性名]
以下のサンプルは指定した要素に属性名data-tempが含まれる場合、要素を赤に設定します。
適用されない 適用される
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
span[data-temp]{
color: red;
}
</style>

<span>適用されない</span>
<span data-temp="user">適用される</span>
</body>
</html>

属性名

要素[属性名="属性値"]
以下のサンプルは指定した要素の属性値targetが指定した値_blankの場合、要素を赤に設定します。
適用されない 適用される
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
a[target="_blank"]{
background-color: #888;
}
</style>

<a href="">適用されない</a>
<a href="" target="_blank">適用される</a>
</body>
</html>

属性名に含まれる名前

要素[属性名~="属性値"]
以下のサンプルは指定した要素の属性値が指定した値usersが含まれる場合、要素を赤に設定します。
適用される 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
span[class~="users"]{
color: red;
}
</style>
<span class="users">適用される</span>
<span class="no users">適用される</span>
<span class="group">適用されない</span>
</body>
</html>

属性名が指定した文字列で始まる

要素[属性名^="属性値"]
以下のサンプルは指定した要素の属性値が指定した値numberで始まる場合、要素を赤に設定します。
適用される 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
span[id^="number"]{
color: red;
}
</style>
<span id="number1">適用される</span>
<span id="number2">適用される</span>
<span id="group">適用されない</span>
</body>
</html>

属性名が指定した文字列で終わる

要素[属性名$="属性値"]
以下のサンプルは指定した要素の属性値が指定した値jpgで終わる場合、要素を赤に設定します。
適用される 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
span[id$="jpg"]{
color: red;
}
</style>
<span id="test1jpg">適用される</span>
<span id="test2jpg">適用される</span>
<span id="group2">適用されない</span>
</body>
</html>

属性名が指定した文字列で始まる(ハイフンまで)

要素[属性名|="属性値"]
以下のサンプルは指定した要素の属性値が指定した値test(ハイフンまで)の場合、要素を赤に設定します。
適用される 適用される 適用されない
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<style type="text/css">
span[id|="test"]{
color: red;
}
</style>
<span id="test-1">適用される</span>
<span id="test-2">適用される</span>
<span id="group3">適用されない</span>
</body>
</html>