Strikethrough text on checked checkbox

Question

I'm trying to make a div text get a strikethrough on checked checkbox but it doesn't work.

I want to strike over item-title when input type="checkbox" is checked.

This is what i have right now:

input[type=checkbox]:checked+div {
  text-decoration: line-through;
}

<div class="list media-list">
  <ul id="todoList">
    <li class="swipeout"><label class="item-checkbox item-content swipeout-content">
              <input type="checkbox" id="test1" name="checkbox" value="2" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title" for="test1">Test</div>
                  <div class="item-after">2019</div>
                </div>
                <div class="item-subtitle">Test text</div>
                <div class="item-text">By Test</div>
              </div>
            </label>
      <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
    </li>
  </ul>
</div>

Well there is no `strikethrough` class and the label is the parent of the input.... — epascarello, May 03 '19 at 20:35
I edited away that the same time as the other guy, I have Div right there — Gnusson, May 03 '19 at 20:36
No, that won't work as the `div` is not the first sibling ... use general sibling selector `~` — Asons, May 03 '19 at 20:38

score 2 · Accepted Answer · answered May 03 '19 at 20:36

+ is the immediately sibling selector and the label isn't one. Try input[type=checkbox]:checked~.item-inner .item-title:

input[type=checkbox]:checked~.item-inner .item-title {
  text-decoration: line-through;
}

<div class="list media-list">
  <ul id="todoList">
    <li class="swipeout"><label class="item-checkbox item-content swipeout-content">
              <input type="checkbox" id="test1" name="checkbox" value="2" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title" for="test1">Test</div>
                  <div class="item-after">2019</div>
                </div>
                <div class="item-subtitle">Test text</div>
                <div class="item-text">By Test</div>
              </div>
            </label>
      <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
    </li>
  </ul>
</div>

This selects the checkbox, then the ~ selects the sibling with the class item-inner, then selects the descendant with the class item-title

Works like a charm, thanks for the help. I cant mark as answered for 9 minutes but thank you so much for your quick answer! — Gnusson, May 03 '19 at 20:39

Strikethrough text on checked checkbox

1 Answers1