Aquí podría ser tu PUBLICIDAD


¿Hay una alternativa preferida a la utilización de los selectores de ID en un corte casilla?

votos
0

Tengo un CMS muy anticuado que se Excluyendo los selectores de ID por cualquier razón que tenían que se deben eliminar los selectores de ID en 2005.

Pero tengo también un corte casilla - que se basa en los selectores de ID - Estoy haciendo mi mejor esfuerzo para integrarse con este CMS. Por lo tanto, el código que debe parecerse a algo como esto:

<input type=checkbox name=controller id=type1_cont><label class=type1_cont for=type1_cont>Type 1</label>

termina así:

<input type=checkbox name=cont><label class=type1_cont for=type1_cont>Type 1</label>

Como era de esperar, esto rompe todo. Voy a incluir la versión reducida de la corte completa (que el señor Lister me ayudó en la limpieza de hace una semana) en la parte inferior, sólo para que pueda tener una mejor idea de lo que estoy haciendo.

Puesto que no hay forma de que pueda utilizar Identificación, ¿hay un selector que puede ser sustituido por ello sin perder la funcionalidad? He intentado usar classpero me parece que no puede conseguir que funcione (tal vez me estoy perdiendo algo?). Y debo señalar que no puedo usar JS o jQuery, ya sea ... a causa de la CMS.

Pido disculpas por la publicación de la pregunta de otro principiante tonta tan pronto después de la última, pero realmente pensaba que tenía todo esto funcionó, y en este momento estoy tan frustrado con el CMS que probablemente estoy perdiendo algo dolorosamente obvio.

.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}

.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}

.wrap input { display: none; }
input:checked ~ main .checker { display: none; }

#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }

#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class=wrap>

  <input type=checkbox name=cont id=check1cont>
  <input type=checkbox name=controllers id=check2cont>
  
  <aside>
    <label class=check1cont for=check1cont>Check 1</label>
    <label class=check2cont for=check2cont>Check 2</label>
  </aside>
  
  <main>
    <figure class=checker check1>CHECK 1</figure>
    <figure class=checker check2>CHECK 2</figure>
  </main>
</div>

Publicado el 03/06/2018 a las 02:12
fuente por usuario user4985

Aquí podría ser tu PUBLICIDAD





Aquí
podría
ser
tu

PUBLICIDAD