CSS3のセレクタ
「E:nth-of-type(n)」
親要素のn番目の子要素であるE要素（他の要素も含めてn番目）
「E:nth-of-type(n)」
親要素内で兄弟関係にあるE要素でn番目のもの
（他の要素を含ないでカウントしてn番目）
nth-of-type(odd)、p:nth-child(2n+1)・・・奇数番目の要素に適用
p:nth-child(even)、p:nth-child(2n) ・・・偶数番目の要素に適用
p:nth-child(3n)・・・3の倍数の要素に適用（3×0,3×1、3×2 ）
※nは0から
#top_link a:nth-of-type(odd){
background-image:-o-linear-gradient(to bottom,rgb(255,255,255)0%,rgb(204,0,0)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
background-image:-webkit-linear-gradient(to bottom,rgb(255,255,255)0%,rgb(204,0,0)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
background-image:linear-gradient(to bottom,rgb(255,255,255)0%,rgb(204,0,0)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
}
#top_link a:nth-of-type(even){/*30%のところの色だけを変えて、オレンジにします。*/
background-image:-o-linear-gradient(to bottom,rgb(255,255,255)0%,rgb(255,102,51)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
background-image:-webkit-linear-gradient(to bottom,rgb(255,255,255)0%,rgb(255,102,51)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
background-image:linear-gradient(to bottom,rgb(255,255,255)0%,rgb(255,102,51)30%,rgb(102,0,0)80%,rgb(206,140,105)100%);
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
＜属性セレクタ＞
属性セレクタは以前、a[属性名]=値 の値を持つものだけを検索していました。
CSS３では*をつける事で下記のように/articles/を含む値を持つものに対しても適用され、
部分一致ができるようになりました。
#main a[href*="/articles/"]{
float:right;
}
//該当するもの（/articles/を含む要素）
<a href="analyses/articles/article01.htm">
<a href="analyses/articles/article02.htm">
<a href="analyses/articles/article03.htm">
前方一致や後方一致もできるようになりました。
a[href$=".pdf"] 全てのPDFファイルに対して適用されます。
afterを利用して、PDFのアイコンを文字の後ろにくっつけるなどもできます。
#main a[href*="/articles/"]::before{/*擬似要素はコロン2つける*/
content:"-";/*これは前からあるやつ*/
}/*IE8以下は::があると動きません。ですので:新しいブラウザは１つのも認めらています。
当面はコロン1つだけのほうが安全でしょう。ですがIE8もそろそろなくなるので、
仕様どおりに::2つ並べて書くか、2重に並べて書いても良いでしょう。
:befor{}
::befor{} 正しい使用の方を後に書きます。
正しい書き方はコロン2つ*/
}
