Question 184268 in CSS Question posted in
Some basic documentation can be found here.

CSS style not affecting dark theme

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search