読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

CSS3セレクタ

属性セレクタ

f:id:web-0818:20170521221519p:plain

属性値が「〜で始まる」要素を選択する
  • E[foo^="bar"]
<ul class="sample">
<li class="STARTxx">class="STARTxx"</li>
<li class="xxSTART">class="xxSTART"</li>
<li class="xxSTARTxx">class="xxSTARTxx"</li>
</ul>
/*〜で始まる*/
li[class^="START"]{
  border-color:#F00;
}


f:id:web-0818:20170521222027p:plain

属性値が「〜で終わる」要素を選択する
  • E[foo$="bar"]
<ul class="sample">
<li class="ENDxx">class="ENDxx"</li>
<li class="xxEND">class="xxEND"</li>
<li class="xxENDxx">class="xxENDxx"</li>
</ul>
/*〜で終わる*/
li[class$="END"]{
  border-color:#F00;
}

f:id:web-0818:20170521222340p:plain

属性値が「〜を含む」要素を選択する
  • E[foo*="bar"]
<ul class="sample">
<li class="CNTxx">class="CNTxx"</li>
<li class="xxCNT">class="xxCNT"</li>
<li class="xxCNTxx">class="xxCNTxx"</li>
</ul>
/*〜を含む*/
li[class*="CNT"]{
  border-color:#F00;
}


f:id:web-0818:20170521222623p:plain

リンクの種類別にアイコンを表示
  • 「外部サイト」へのリンクには末尾に外部リンクアイコン、「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;	
}


f:id:web-0818:20170521223942p:plain

擬似クラス

  • 新たに追加された擬似クラス

f:id:web-0818:20170521224143p:plain

すべての子要素をカウントする「〜 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;
}

f:id:web-0818:20170521224904p:plain


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

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

f:id:web-0818:20170521225455p:plain


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

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

f:id:web-0818:20170521225851p:plain


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

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

f:id:web-0818:20170521230150p:plain


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

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

f:id:web-0818:20170521233838p:plain

同じ要素のみをカウントする「〜 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;
}

f:id:web-0818:20170522000522p:plain


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

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

f:id:web-0818:20170522000911p:plain


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

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

f:id:web-0818:20170522001300p:plain

しましまテーブルを作る
<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;
}

f:id:web-0818:20170522001702p:plain

最後の1行だけ赤い文字色で強調する
<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;
}

f:id:web-0818:20170522002117p:plain

否定擬似クラス

  • :not(s) は、sで指定したセレクタの対象となるもの以外を選択する擬似クラスです
<ul class="sample nots">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>
/*最後の1行以外全てを選択*/
.nots li:not(:last-child){
  border-color:#F00;
}

f:id:web-0818:20170522002726p:plain

ターゲット擬似クラス
<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>
/*最後の1行以外全てを選択*/
.nots li:not(:last-child){
  border-color:#F00;
}

f:id:web-0818:20170522003115p:plain

広告を非表示にする