css の :hover で最深階層のエレメントだけ色を変えたい

下記のようなhtmlがあったときに「ここだけ色を変えたい」部分だけ、
color,background-colorを変えたいと思っています。
jQueryでできそうですが、cssだけでもできないかと考えています。
:hoverと:not使いながらあれこれ試しているのですが、階層の深さが変わると目的通りにいかない状態です。

lang
1<div class="alpha">
2  <div class="beta">
3    <span>ここは変えたくない</span>
4  </div>
5  <div class="alpha">
6  <span>ここは変えたくない</span>
7    <div class="beta">
8      <span>色を変えたい</span>
9   </div>
10   <div class="alpha">
11     <div class="beta">
12       <span>ここは変えたくない</span>
13      </div>
14    </div>
15  </div>
16</div>

lang
1.alpha:hover .beta:hover{
2  background-color:red
3}
4.alpha:hover :not(.alpha) .beta:hover{
5  background-color:red
6}

このような同じセレクターが階層化した場合に、最も深い（マウスホーバー直近）のエレメントのみを対象にする方法はあるでしょうか？

【追記】
spanの部分は実際にはspan以外にもpやdivが存在する場合もあります。
最小限の短いコードにしていあるため申し訳ありません。

よろしくお願いします。

行動規範の内容に同意します

回答3件

lang
1<div class="alpha">
2  <div class="beta">
3    <span>ここは変えたくない</span>
4  </div>
5  <div class="alpha">
6  <span>ここは変えたくない</span>
7    <div class="beta">
8      <span>色を変えたい</span>
9   </div>
10   <div class="alpha">
11     <div class="beta">
12       <span>ここは変えたくない</span>
13      </div>
14    </div>
15  </div>
16</div>

lang
1.alpha:hover>.alpha>span+.beta{
2	background:red;
3}

これでできます。ポイントは色を変えたい部分のタグだけ直前にspanタグがあるところです。

投稿2015/07/10 22:01

dshukertjr

総合スコア37

退会済みユーザー

2015/07/13 07:05

「>（直下の要素）」「+（隣接の要素）」を使ってを対象にする方法ですね。この辺りの理解がまだ不足していますが勉強してみます。コードを試したところ、「変えたい」の一つ上の要素「変えたくない」で「変えたい」の色が変わってしまいました。

行動規範の内容に同意します

一応それのみを対象にできていると思いますが・・・
深い階層の物はセレクタを増やしてあげればセレクタの評価点数が増えるのでそれを利用しました。

lang
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title></title>
6<style type="text/css">
7span{
8  display:inline-block;
9  width:200px;
10  height:100px;
11}
12.alpha .alpha .beta span:hover{
13  background-color:red;
14}
15.alpha .alpha div .beta span:hover{
16  background:none;
17}
18</style>
19</head>
20<body>
21	<div class="alpha">
22		<div class="beta">
23			<span>ここは変えたくない</span>
24		</div>
25
26		<div class="alpha">
27
28			<span>ここは変えたくない</span>
29
30			<div class="beta">
31				<span>色を変えたい</span>
32			</div>
33
34			<div class="alpha">
35
36				<div class="beta">
37					<span>ここは変えたくない</span>
38				</div>
39
40			</div>
41		</div>
42	</div>
43</body>
44</html>

ですが、クラス分けするのが一番いいですよね。

あと、動きが想定している動きと違うかもしれません；

投稿2015/07/08 06:18

JunTomizawa

総合スコア248

JunTomizawa

2015/07/08 06:19

あ、ちなみにこの回答では一度2つの要素に:hover→background:redをあてて1つを解除しています。

退会済みユーザー

2015/07/13 06:53

回答有難うございます。お返事が遅くなってスミマセン。お返事を投稿したつもりが、確定しないまま閉じてしまったようです。階層の深さは一意ではないところが悩み深き所です。作成中のソースを貼り付けるのがベストですが如何せん長すぎて…。「全部指定してから例外を解除する」というやり方、参考にさせていただきます。

行動規範の内容に同意します

このページが参考になるんじゃないでしょうか？
Hover on “Everything But

投稿2015/07/08 04:58