属性セレクター

属性セレクター (attribute selector)

ある種類の属性のある要素を対象に指定できます

developer.mozilla.org

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性セレクター</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sample {
  list-style: none;
  border: 1px solid #aaa;
  margin: 40px;
}
li {
  margin: 10px;
  padding: 10px 20px;
  background: #ECECEC;
  border: 2px solid #aaa;
}
</style>
</head>
<body>
<ul class="sample">
  <li class="STARTxx">class="STARTxx"</li>
  <li class="xxEND">class="xxEND"</li>
  <li class="xxCENTERxx">class="xxCENTERxx"</li>
</ul>
</body>
</html>

属性値が「〜で始まる」要素を選択する

E[foo^="bar"]

<ul class="sample">
  <li class="STARTxx">class="STARTxx"</li>
  <li class="xxEND">class="xxEND"</li>
  <li class="xxCENTERxx">class="xxCENTERxx"</li>
</ul>

/*〜で始まる*/
li[class ^= "START"]{
  border-color: #F00;
}

属性値が「〜で終わる」要素を選択する

E[foo$="bar"]

/*〜で終わる*/
li[class $= "END"]{
  border-color: #F00;
}

属性値が「〜を含む」要素を選択する

E[foo *= "bar"]

<ul class="sample">
<li class="CENTERxx">class="CENTERxx"</li>
<li class="xxCENTER">class="xxCENTER"</li>
<li class="xxCENTERxx">class="xxCENTERxx"</li>
</ul>

/*〜を含む*/
li[class *= "CENTER"]{
  border-color: #F00;
}

リンクの種類別にアイコンを表示

「外部サイト」へのリンクには末尾に外部リンクアイコン、「PDFファイル」へのリンクには先頭にPDFアイコンが自動的につくように属性セレクタを設定します

<ul class="sample">
<li><a href="index.html">通常のリンク</a></li>
<li><a href="http://www.google.com/">外部サイトへのリンク</a></li>
<li><a href="img/file01.pdf">PDFファイルへのリンク</a></li>
</ul>

/*外部サイトへのリンク*/
a[href ^= "http"]{
  padding-right:20px;
  background:url(../img/icon_blank.gif) right center no-repeat;	
}

/*PDFファイルへのリンク*/
a[href $= ".pdf"]{
  padding-left:20px;
  background:url(../img/icon_pdf.gif)  no-repeat;	
}

擬似クラス

すべての子要素をカウントする「〜 child」系擬似クラス

ul.child の最後の子要素の枠線を赤くする

<ul class="sample child">
<li>child1 (first)</li>
<li>child2</li>
<li>child3</li>
<li>child4</li>
<li>child5</li>
<li>child6</li>
<li>child7 (last)</li>
</ul>

/*最後の子要素*/
.child :last-child{
  border-color: #F00;
}

/*最後の子要素li*/
.child li:last-child{
  border-color: #F00;
}

３番目の子要素の枠線を赤くする

/*3番目の子要素*/
.child :nth-child(3){
  color: #F00;
}

後ろから３番目の子要素の文字を青くする

/*後ろから3番目の子要素*/
.child :nth-last-child(3){
  color: #00F;
}

偶数番目の子要素だけ背景色を #FFFFD1 にする

/*偶数番目の子要素*/
.child :nth-child(even){
  background-color: #FFFFD1;;
}

２番目を先頭に３つおきの子要素の枠線を３pxの黒実線にする

/*2番目を先頭に３つおきの子要素*/
.child :nth-child(3n+2){
  border: #000 3px solid;
}

同じ要素のみをカウントする「〜 of-type」系擬似クラス

<div class="sample ofType">
<h4>heading1 (h4)</h4>
<p>paragraph1</p>
<h4>heading2 (h4)</h4>
<p>paragraph2</p>
<h5>heading3 (h5)</h5>
<p>paragraph3</p>
</div>

.ofTypeの最初の要素の枠線を赤くする

/*最初の要素*/
.ofType :first-of-type{
  border-color: #F00;
}

.ofTypeの偶数番目の要素の枠線を青くする

/*偶数個目の要素*/
.ofType :nth-of-type(even){
  border-color: #00F;
}

.ofTypeの唯一の要素の文字を赤くする

/*唯一の要素*/
.ofType :only-of-type{
  color: #F00;
}

しましまテーブルを作る

<table class="stripe">
<tr><td>White</td><td>White</td></tr>
<tr><td>Gray</td><td>Gray</td></tr>
<tr><td>White</td><td>White</td></tr>
<tr><td>Gray</td><td>Gray</td></tr>
</table>

/*しましまテーブル*/
.stripe tr:nth-child(even){
  background-color: #EEE;
}

最後の１行だけ赤い文字色で強調する

<dl class="lastRed">
<dt>Item1</dt>
<dd>XXXXXXXXXX</dd>
<dt>Item2</dt>
<dd>XXXXXXXXXX</dd>
<dt>Item3</dt>
<dd>XXXXXXXXXX</dd>
</dl>

/*最後の1行を赤文字に*/
.lastRed :last-of-type{
  color: #F00;
}

否定擬似クラス

:not(s) は、ｓで指定したセレクタの対象となるもの以外を選択する擬似クラスです

<ul class="sample nots">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>

/*最後の１行以外全てを選択*/
.nots li:not(:last-child){
  border-color: #F00;
}

ターゲット擬似クラス

<dl class="target">
  <dt><a href="#panel1">銀河鉄道の夜</a></dt>
  <dd id="panel1">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。⋯⋯</dd>
  <dt><a href="#panel2">注文の多い料理店</a></dt>
  <dd id="panel2">二人の若い紳士しんしが、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲てっぽうをかついで、白熊しろくまのような犬を二疋ひきつれて、だいぶ山奥やまおくの、木の葉のかさかさしたとこを、こんなことを云いいながら、あるいておりました。⋯⋯</dd>
  <dt><a href="#panel3">風の又三郎</a></dt>
  <dd id="panel3">谷川の岸に小さな学校がありました。教室はたった一つでしたが生徒は三年生がないだけで、あとは一年から六年までみんなありました。運動場もテニスコートのくらいでしたが、すぐうしろは栗くりの木のあるきれいな草の山でしたし、運動場のすみにはごぼごぼつめたい水を噴ふく岩穴もあったのです。⋯⋯</dd>
</dl>

dl {
  width: min(90%, 500px);
  margin: 50px auto;
  border: 1px solid #666;
  border-bottom: 0;
}
dt > a {
  display: block;
  padding: 1.0rem 1.5rem;
  background-color: #f3efef;
  border-bottom: 1px solid #666;
  cursor: pointer;
}
dd {
  display: none;
  padding: 1.0rem 1.5rem;
  border-bottom: 1px solid #666;
}

/*リンク先を開く*/
.target dd:target {
  display: block;
}