効率よくセレクタを指定してcss効かせるサンプル！21選
cssでいろんなセレクタの指定で要素にcssを適用するサンプルです。
目次
基本の指定
タグで指定
p{
color: red;
}
適用される
適用されないidで指定
#test1{
color: red;
}
適用される
適用されない
classで指定
.test1{
color: red;
}
適用される
適用されない
適用される
全てを指定
*{
color: red;
}
適用される
適用される
適用される
子孫要素で指定
.box1 .test1{
color: red;
}
適用される
適用されない
適用される
子要素のみを指定
該当要素の次の弟要素のみを指定
該当要素の次以降の弟要素のみを指定
属性値で指定
要素が持つ属性で指定
p[align]{
color: red;
}
適用される
適用される
適用されない
属性値が完全一致で適用
属性値が指定文字で終わる場合に適用
属性値に指定文字が含まれる場合に適用
疑似要素で指定
兄弟要素の中で一番最初に現れる要素に適用
.box a:first-child{
color: red;
}
.box:first-child a{
font-weight: bold;
}
兄弟要素の中で一番最後に現れる要素に適用
.box a:last-child{
color: red;
}
.box:last-child a{
font-weight: bold;
}
兄弟要素の中で最初からn番目に現れる要素に適用
p:nth-of-type(2){
color: red;
}
適用されない
適用されない
適用される
兄弟要素の中で後ろからn番目に現れる要素に適用
p:nth-last-of-type(3){
color: red;
}
適用される
適用されない
適用されない
適用されない
兄弟要素の中で先頭からn番目(nの倍数)に現れる要素に適用
p:nth-child(odd){
color: red;
}
適用される
適用されない
適用されない
適用される
適用されない
唯一の子要素である要素に適用
.box p:only-child{
color: red;
}
適用される
適用されない
適用されない
適用されない
子要素の中で唯一の要素に適用
.box p:only-of-type{
color: red;
}
適用されない
適用される
適用されない
適用されない
子要素を持たない要素に適用
p:empty{
background: red;
width: 100%;
height: 15px;
}
適用される
適用されない
指定セレクタでない要素に適用
p:not(.test):not([align="left"]){
color: red;
}
適用される
適用されない
適用されない