トップ > ★CSS3 > CSS3 - セレクタ

CSS3 - セレクタ

★CSS3

属性セレクタ

ul,li {
  margin: 0;
  padding: 0;
}
.sample {
  list-style: none;
  border: 1px solid #aaa;
}
li {
  margin: 10px;
  padding: 10px 20px;
  background: #ECECEC;
  border: 2px solid #aaa;
}

属性値が「〜で始まる」要素を選択する
  • 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="sample target">
<dt><a href="#panel1">MENU1</a></dt>
<dd id="panel1">panel1 panel1 panel1 panel1 panel1 panel1 panel1 panel1 panel1</dd>
<dt><a href="#panel2">MENU2</a></dt>
<dd id="panel2">panel2 panel2 panel2 panel2 panel2 panel2 panel2 panel2 panel2</dd>
<dt><a href="#panel3">MENU3</a></dt>
<dd id="panel3">panel3 panel3 panel3 panel3 panel3 panel3 panel3 panel3 panel3</dd>
</dl>

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