CSSでこれできないの！？
◆ :hover:visited
すでに開いたことのあるリンクにカーソルを合わせた時の指定
◆ li:not(class):nth-of-type(2n)
あるclassが指定されていない要素の中で偶数番目
ができない
すでに開いたことのあるリンクにカーソルを合わせた時の指定
◆ li:not(class):nth-of-type(2n)
あるclassが指定されていない要素の中で偶数番目
ができない
できるよねー と思って書いてみたら動かなくてショックを受けてます
開いたことのあるリンクは色を変えて表示したりですね
:hoverはマウスカーソルがエレメントの上に乗った時のスタイルを指定できます
背景色が変えるのが多いと思います
この2つを一緒に使って開いたことないリンクにカーソル合わせた時と開いたことあるリンクにカーソル合わせた時で別のスタイルを適用したかったんです
詳しく言うと 開いたことのあるなしで通常時のリンク文字の色を変えています
そのリンクにカーソル合わせた時に それぞれの色に応じて背景や影をつけたかったんです
ですがやってみると:hoverだけのスタイルが両方に適用されてしまいました
CSSで無理ならJavaScriptですればいいのですが 個人的にデザインはCSSでやりたいです
onmouseoverやonmouseoutでstyle属性を書き換えるのってあんまり綺麗じゃないじゃないですか
:nth-of-type(5)だと5番目のエレメントです
:nth-of-type(2n)は偶数番目に適用されるスタイルを指定できます
似ているのに :nth-child() というのもあってnth-of-type() は「指定されたものの中で何番目か」 と言うのに対して 親エレメントの何番目の子という意味です
なので div:nth-child(1) と指定しても1番目の子エレメントがdivじゃなければマッチするものなしです
div:nth-of-type(1) だと親エレメントが持つ子エレメントの中で最初のdivエレメントになります
マッチなしはdivが存在しない時だけです
言葉だけじゃわかりづらいのでサンプルを用意してみました
まず1つめのスタイルですが 親エレメントのdivの2つ目の子エレメントはpではないので無視されます
2つめですが lightgreenの色がついてるのはp2です
2つめの子エレメントのdiv1ではなくpエレメントの2つ目になってます
3つめは2つ目のdivエレメント div2がlightblueになっています
4つめはabcクラスのdivの1つ目なのでdiv1の色がgoldになってます
5つめはabcクラスのpの1つ目なのでp4がredに……なってません
は！？なにこのよくわからない動きは！
他にもいくつか調べてみましたがタグ名とクラス名のように複数組み合わせるとまともに動かないようです
:使うセレクタもダメなようで
非表示になっていないエレメントで縞模様になるはずなんですが……なってません
非表示にした2、4、7を除いたもので縞模様になので3、6、9に色がついてて欲しいんですけど6と8に色がついていてnotが無視されてるようです
nth-of-typeを除いて試すとhiddenクラスじゃないのだけ色が付いているのでnotの方に間違いはないはずです
CSS3って便利な反面よくわからない動きをするのが多いと思います
いい方法あれば誰か教えてください
:visited:hover
:visitedを使うとすでに開いたことのあるリンクに対するスタイルを指定できます開いたことのあるリンクは色を変えて表示したりですね
:hoverはマウスカーソルがエレメントの上に乗った時のスタイルを指定できます
背景色が変えるのが多いと思います
この2つを一緒に使って開いたことないリンクにカーソル合わせた時と開いたことあるリンクにカーソル合わせた時で別のスタイルを適用したかったんです
詳しく言うと 開いたことのあるなしで通常時のリンク文字の色を変えています
そのリンクにカーソル合わせた時に それぞれの色に応じて背景や影をつけたかったんです
ですがやってみると:hoverだけのスタイルが両方に適用されてしまいました
CSSで無理ならJavaScriptですればいいのですが 個人的にデザインはCSSでやりたいです
onmouseoverやonmouseoutでstyle属性を書き換えるのってあんまり綺麗じゃないじゃないですか
:not(class):nth-of-type(2n)
:nth-of-typeは()の中に数字を書くとその番目のエレメントの属性を指定できます:nth-of-type(5)だと5番目のエレメントです
:nth-of-type(2n)は偶数番目に適用されるスタイルを指定できます
似ているのに :nth-child() というのもあってnth-of-type() は「指定されたものの中で何番目か」 と言うのに対して 親エレメントの何番目の子という意味です
なので div:nth-child(1) と指定しても1番目の子エレメントがdivじゃなければマッチするものなしです
div:nth-of-type(1) だと親エレメントが持つ子エレメントの中で最初のdivエレメントになります
マッチなしはdivが存在しない時だけです
言葉だけじゃわかりづらいのでサンプルを用意してみました
<div>
<p>p1</p>
<div class="abc">div1</div>
<p>p2</p>
<p>p3</p>
<div>div2</div>
<p class="abc">p4</p>
</div>
<style>
p:nth-child(2){background:lightpink;}
p:nth-of-type(2){background:lightgreen;}
div:nth-of-type(2){background:lightblue;}
p.abc:nth-of-type(1){color:purple;}
div.abc:nth-of-type(1){color:gold;}
p.abc:nth-of-type(1){color:red;}
</style>
p1
div1
p2
p3
div2
p4
まず1つめのスタイルですが 親エレメントのdivの2つ目の子エレメントはpではないので無視されます
2つめですが lightgreenの色がついてるのはp2です
2つめの子エレメントのdiv1ではなくpエレメントの2つ目になってます
3つめは2つ目のdivエレメント div2がlightblueになっています
4つめはabcクラスのdivの1つ目なのでdiv1の色がgoldになってます
5つめはabcクラスのpの1つ目なのでp4がredに……なってません
は！？なにこのよくわからない動きは！
他にもいくつか調べてみましたがタグ名とクラス名のように複数組み合わせるとまともに動かないようです
:使うセレクタもダメなようで
<ul>
<li>1</li>
<li class="hidden">2</li>
<li>3</li>
<li class="hidden">4</li>
<li>5</li>
<li>6</li>
<li class="hidden">7</li>
<li>8</li>
<li>9</li>
</ul>
<style>
.hidden{display:none;}
li:not(.hidden):nth-of-type(2n){background:silver;}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
非表示になっていないエレメントで縞模様になるはずなんですが……なってません
非表示にした2、4、7を除いたもので縞模様になので3、6、9に色がついてて欲しいんですけど6と8に色がついていてnotが無視されてるようです
nth-of-typeを除いて試すとhiddenクラスじゃないのだけ色が付いているのでnotの方に間違いはないはずです
CSS3って便利な反面よくわからない動きをするのが多いと思います
いい方法あれば誰か教えてください
