山本ワールド
CSSセレクタ
2024年01月16日(火) 09時35分更新
項目のみ表示/展開表示の切り替え

クラスセレクタ
.クラス名
以下のサンプルは指定したクラス名の属性を赤に設定します。
適用されない
適用される
適用されない
<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>
Copyright (C) 2012 山本ワールド All Rights Reserved.