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>