CSS style not affecting dark theme

Question

I'm trying to use :nth-of-type to highlight a specifc element beased on its class and index.

.verse {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.line {
  display: block;
}

.word {
  display: inline;
}

.beat {
  display: inline;
}

.verse .line .beat:nth-of-type(3) {
  border-width: 1px;
  border-color: yellow;
  border-style: solid;
}

<div class="song">
  <div class="verse">
    <div class="line">
      <div class="word">
        <div class="beat">His</div>
        <div class="beat">t'ry</div>
      </div>
      <div class="word">
        <div class="beat">for</div>
      </div>
      <div class="word">
        <div class="beat">10's</div>
      </div>
      <div class="word">
        <div class="beat">ans</div>
        <div class="beat">wer</div>
      </div>
      <div class="word">
        <div class="beat">is</div>
      </div>
    </div>
  </div>
</div>

Here is a fiddle:

https://jsfiddle.net/MarkNahabedian/0ya5ugow/

Due to vision limitations, I use dark theme.

I don't see the specified border around the word "for".

When I look using developer mode in Chrome (in my real example, not the fiddle), I see that the border style is shown in the styles pane, but not in the actual display of the document.

Can someone tell me what I'm missing or doing wrong?

Thanks.

See also: [Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?](https://stackoverflow.com/q/5545649) — InSync, Jun 11 '23 at 18:45

score 0 · Answer 1 · answered Jun 11 '23 at 17:48

There is no nth-of-type(3) for CSS class beat. The count is derived from the parent not from all occurences, if you want to achieve your desired effect, get rid of all <div class="word"> definitions and only use one for all, like this

.verse {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
}

.line {
    display: block;
}

.word {
    display: inline;
}

.beat {
    display: inline;
}

.verse .line .beat:nth-of-type(3)
{
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

<html>
  <body>
    <div class="song">
      <div class="verse">
        <div class="line">          
          <div class="word">
            <div class="beat">His</div>
            <div class="beat">t'ry</div>
            <div class="beat">for</div>
            <div class="beat">10's</div>
            <div class="beat">ans</div>
            <div class="beat">wer</div>              
            <div class="beat">is</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Aaargh! I guess I need to type my entire comment somewhere else and then paste it in. What I'm ultimately trying to do is synchronize the highlighting of each `div.breat` with an audio track. I'd prefer to not resort to javascript if possible. If I need to use javascript, how would the javascript code track the current audio time index? Would I then do the highlighting by adding or removing a `highlight` class from each element as appropriate? — user3159619, Jun 12 '23 at 15:44

score -1 · Answer 2 · answered Jun 11 '23 at 17:48

The :nth-of-type() finds the nth child, of the same type (tag name), of its parent. As you gave .verse .line .beat:nth-of-type(3) it searches for the 3rd .beat class. which is not available to a single parent.

Since I think you want to choose the 3rd .beat globally. you can do it via Javascript.

const beatElement = document.querySelectorAll(".beat");

beatElement[2].classList.add("beat-highlight");

CSS:

.beat-highlight
{
    border-width: 1px;
    border-color: yellow;
    border-style: solid;
}

upvote make me happy :)

CSS style not affecting dark theme

2 Answers2