Here is such a thing (code below). The validator is cursing, although the effect is visually:

Element div in child

Help correct mistakes, I will be grateful

.cases { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding-top: 52px; } .case1, .case2, .case3 { float: left; margin:10px 46px 0 0; width: 270px; height: 420px; border: 1px solid #EDEDED; cursor: pointer; display: block; } .marker { display: block; width: 30%; height: 2px; margin: 0 auto; background-color: #00B533; opacity: 0; transition: 0.3s; } #case1, #case2, #case3 { display: none; } #case1:checked + .marker { opacity: 1; } #case1:checked ~ .case-btn, #case2:checked ~ .case-btn, #case3:checked ~ .case-btn { background: #00B533; color: #fff; } /*#case2:checked ~ .case-btn{*/ /*background: #00B533;*/ /*}*/ /*#case3:checked ~ .case-btn{*/ /*background: #00B533;*/ /*}*/ #case2:checked + .marker { opacity: 1; } #case3:checked + .marker { opacity: 1; } .case-header { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #EDEDED; height: 110px; } .case-title { display: block; width: 100%; font-family: "Roboto Medium"; font-size: 14px; text-align: center; padding: 25px 0; margin: 0 auto; } .round { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90px; height: 90px; border: 2px solid #00B533; border-radius: 50%; margin: 0 auto; font-family: "Roboto Medium"; font-size: 23px; background: #fff; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1); } .round p:last-child { font-family: "Roboto Light Italic"; font-size: 10px; } .case-description { text-align: center; padding-top: 75px; } .case-description ul { margin: 0; padding: 0; list-style-type: none; } .case-description ul li { padding-top: 18px; } .case-btn { display: block; margin: 35px auto 0; height: 30px; width: 120px; background: #fff; border: 1px solid #EDEDED; border-radius: 20px; transition: 0.3s; } .case-btn:hover { background: #00B533; color: #ffffff; } .case-btn:focus { outline: none; } 
 <div class="cases"> <div class="case1"> <label for="case1"> <input type="radio" id="case1" name="choice" /> <div class="marker"></div> <div class="case-header"> <p class="case-title">BLABLABLA</p> <div class="round"> </div> </div> <div class="case-description"> <ul> <li > <p>Some Text</p> </li> <li > Some Text </li> <li > <p>Some Text</p> </li> <li >Some Text</li> </ul> </div> <button class="case-btn">PURCHASE</button> </label> </div> </div>

  • Duck is written in the error that it is impossible to drop in the label - div , English in yellow. Well, in any case - it is impossible according to the validator. - SLy_huh
  • So that's the catch - how to fix the situation? - VaskM
  • Well, I would have scored, esic. Spans - in my opinion even less valid, spans - are needed to edit the formatting in the text, not to display the blocks. W3C - reads: >A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text >A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text . So, for example, you can change the whole mechanism of the whole structure, if you really need a fully valid page. - SLy_huh
  • And what is your nonsense written? Label is needed to sign input. The input attribute must contain the input id , and you slip the class. For some reason you push the button there. What do you want to do and why do you need a label ? - Anton Shchyrov

0