継続クラスに CSS スタイルを適用する方法

Question

.checked クラスが存在する場合、text-decoration: line-through; スタイルを .todo-name## に挿入する必要があります。

# (CSS で実行できるかどうかはわかりませんでしたが、最後のチャンスとして js を使用することもできるかもしれません)

リーリー

コードペンプロジェクト

最終結果は次のようになります

Answer 1

いくつかの問題が発生しました。コメントで述べたように、JavaScript を使用したくない場合は、疑似クラスを使用する必要があります。 : この例では がチェックされています。

次に、CSS セレクター ~ を使用します。これは、この要素の前ではなく後の兄弟要素を選択します。したがって、セレクター #0:checked ~ .todo-name を使用して .todo-name を選択しようとしても、名前がチェックボックスの前に表示されるため、機能しません。

以下は、実際に動作するバージョンの例です。

リーリー リーリー