first-childや、nth-of-type()などを使って、効率よくセレクタを指定してcss効かせるサンプル！21選
もくじ
- 1.タグで指定
- 2.idで指定
- 3.classで指定
- 4.全てを指定
- 5.子孫要素で指定
- 6.子要素のみを指定
- 7.該当要素の次の弟要素のみを指定
- 8.該当要素の次以降の弟要素のみを指定
- 9.要素が持つ属性で指定
- 10.属性値が完全一致で適用
- 11.属性値が指定文字で終わる場合に適用
- 12.属性値に指定文字が含まれる場合に適用
- 13.兄弟要素の中で一番最初に現れる要素に適用
- 14.兄弟要素の中で一番最後に現れる要素に適用
- 15.兄弟要素の中で最初からn番目に現れる要素に適用
- 16.兄弟要素の中で後ろからn番目に現れる要素に適用
- 17.兄弟要素の中で先頭からn番目(nの倍数)に現れる要素に適用
- 18.唯一の子要素である要素に適用
- 19.子要素の中で唯一の要素に適用
- 20.子要素を持たない要素に適用
- 21.指定セレクタでない要素に適用
css関連記事
レスポンシブ対応がカンタンに！CSS aspect-ratioプロパティの使い方
jQuery UIのsortableを使ってリストをドラッグで並び替える
HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
placeholderを見やすく！jQuery+css3でつくるフローティングラベル
効率よくセレクタを指定してcss効かせるサンプル！21選
楽天スマホで使える！classを使わずにcssを適用する裏技
cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
サンプルはこちらから。
1.タグで指定
css
p{
color: red;
}
タグを指定してstyleを適用します。
2.idで指定
css
#test1{
color: red;
}
idを指定してstyleを適用します。#test1と書いても、p#test1どちらも同じですが、
上書きの際は優先度が違うので、タグと一緒に書くp#test1で適用したものが優先されます。
3.classで指定
css
.test1{
color: red;
}
classを指定してstyleを適用します。.test1と書いても、p.test1どちらも同じですが、
上書きの際は優先度が違うので、タグと一緒に書くp.test1で適用したものが優先されます。
4.全てを指定
css
*{
color: red;
}
*アスタリスクを指定すると全ての要素を指定します。
昔流行った*でmarginなどを全部0にするなんてのもありましたね。
5.子孫要素で指定
css
.box1 .test1{
color: red;
}
.box1要素の中にある、.test1を指定してstyleを適用します。
6.子要素のみを指定
css
.box > a{
color: red;
}
.box1要素の中にある兄弟要素の中での、aタグを指定してstyleを適用します。
7.該当要素の次の弟要素のみを指定
css
.box p + a{
color: red;
}
.box1要素の中にある兄弟要素の、pタグに対して次に出現するaタグのみを指定してstyleを適用します。
次の要素のみなので1つしか選択されません。
8.該当要素の次以降の弟要素のみを指定
css
.box p ~ a{
color: red;
}
.box1要素の中にある兄弟要素の、pタグに対して次以降に出現するaタグを全て指定してstyleを適用します。
次以降の要素のみなので該当すれば複数適用されます。
9.要素が持つ属性で指定
css
p[align]{
color: red;
}
要素が持つ属性を指定してstyleを適用します。
値が何であろうと属性がついていれば適用されます。
10.属性値が完全一致で適用
css
a[href="./test1.html"]{
color: red;
}
要素が持つ属性を指定してstyleを適用します。
値が完全一致した場合適用されます。同じ属性値の場合は複数適用されます。
11.属性値が指定文字で終わる場合に適用
css
a[href$=".html"]{
color: red;
}
要素が持つ属性を指定してstyleを適用します。
値の末尾が一致した場合適用されます。
12.属性値に指定文字が含まれる場合に適用
css
a[href*="0"]{
color: red;
}
要素が持つ属性を指定してstyleを適用します。
値の中から指定文字が存在した場合適用されます。
13.兄弟要素の中で一番最初に現れる要素に適用
css
.box a:first-child{
color: red;
}
.box:first-child a{
font-weight: bold;
}
.box a:first-childとした場合、.boxの子要素の最初がaタグだった場合に適用されます。
なのでデモの1つ目はcolor: red;適用されていません。
cssの2つ目の.box:first-child aとした場合は、最初の.boxの子要素がaタグだった場合に適用されます。
なのでデモの2つ目はcolor: red;適用されています。
14.兄弟要素の中で一番最後に現れる要素に適用
css
.box a:last-child{
color: red;
}
.box:last-child a{
font-weight: bold;
}
:first-childが最初からなので:last-childは最後からになります。
これも最後の要素が対象外だった場合、適用されません。
15.兄弟要素の中で最初からn番目に現れる要素に適用
css
p:nth-of-type(2){
color: red;
}
p,div,pと並んでいる中で、p:nth-of-type(2)で初めから2番目に出現するpにstyleを適用します。
間をdivで挟んでもpの出現回数でカウントします。
16.兄弟要素の中で後ろからn番目に現れる要素に適用
css
p:nth-last-of-type(3){
color: red;
}
p:nth-last-of-type(3)で後ろから3番目に出現するpにstyleを適用します。
間をdivで挟んでもpの出現回数でカウントします。
17.兄弟要素の中で先頭からn番目(nの倍数)に現れる要素に適用
css
p:nth-child(odd){
color: red;
}
p:nth-child(odd)で奇数番目に出現するpにstyleを適用します。
n番目の子要素でカウントします。デモの場合、3番目の要素がdivなので適用されませんが、カウントはされます。
()内の指定方法はいろいろあります。
even：偶数
3n：3の倍数ごと
2n-1：奇数
3nのように指定するとnが自動的に1,2,3とカウントアップされていくイメージです。
nと頭の3をかけて、3,6,9番目のように指定することができます。
2n-1の場合は2*1-1なので奇数になります。
18.唯一の子要素である要素に適用
css
.box p:only-child{
color: red;
}
.boxの子要素がpタグだけの場合適用できます。:only-childの適用範囲は子要素が1つだけの場合のみです。
jsなどで可変リストを作るときにいろんなパターンが出てしまう場合に便利そうですね！
19.子要素の中で唯一の要素に適用
css
.box p:only-of-type{
color: red;
}
.boxの子要素がpタグだけの場合適用できます。:only-of-typeの適用範囲は子要素は複数あっても問題なく、
該当要素が1つだけの場合のみです。:only-childと適用範囲が少し違いますね！
20.子要素を持たない要素に適用
css
p:empty{
background: red;
width: 100%;
height: 15px;
}
:emptyは子要素がない場合に適用されます。
使えそうで使い道が見えないですねw
21.指定セレクタでない要素に適用
css
p:not(.test):not([align="left"]){
color: red;
}
:not(.test)で該当セレクタがない要素に適用されます。
notは複数指定でき、重ねて書くと適用されます。
コメント