CSS style not affecting dark theme

Question

CSS style not affecting dark theme

85 Views Asked by Mark Nahabedian At 11 June 2023 at 17:10

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.

Original Q&A

There are 2 best solutions below

**slnad** · Answer 1 · 2023-06-11T17:48:00.653000

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>

**jony-jas** · Answer 2 · 2023-06-11T17:48:44.433000

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

There are 2 best solutions below

Related Questions in CSS

Related Questions in CSS-SELECTORS

Related Questions in DARK-THEME

Trending Questions

Popular # Hahtags

Popular Questions