0

I'd like to show an outline the mouse is over but the selector highlights all descendants. Is there a selector to have it select only one element?

.container *:hover {
   outline: 1px dashed black;
   font: sans-serif;
   white-space: pre;
}
.hljs-tag {
    color: #333;
}
.hljs {
    background: #fff;
    color: #333;
}
.hljs-name, .hljs-section {
    color: #63a35c;
}
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
    color: #6f42c1;
}
<pre class="container">
  <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span> <span class="hljs-attr">rx</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">ry</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">x</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">y</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;212&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;119&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
</pre>
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    Unfortunately, I think what you want is impossible. Whenever a child gets the `:hover` attribute, it's parent also receives the `:hover` attribute. This question has more information: https://stackoverflow.com/questions/54604252/prevent-hover-bubbling – Sam Spade Aug 26 '22 at 02:08

1 Answers1

0

For selecting the first child element only, you can use > in between classes to reference just the element at that specific level, not under that.

.parent > .children

If I don't misunderstand, you won't just highlight the first span under .container.

So you can use:

To highlight just the first children

.container > span:hover

To highlight just children of second level

.container > span:hover > span

To select just the hovered element

`span > span:hover``

Working example:

.container > span:hover  {
   outline: 1px dashed black;
   font: sans-serif;
   white-space: pre;
}
.hljs-tag {
    color: #333;
}
.hljs {
    background: #fff;
    color: #333;
}
.hljs-name, .hljs-section {
    color: #63a35c;
}
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
    color: #6f42c1;
}
<pre class="container">
  <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span> <span class="hljs-attr">rx</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">ry</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">x</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">y</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;212&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;119&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
</pre>
Alvin
  • 762
  • 4
  • 14