<sectionid="description"> Ha estado asignando atributos de <code>id</code> o <code>class</code> a los elementos que desea diseñar específicamente. Estos son conocidos como ID y selectores de clase. Hay otros selectores de CSS que puede usar para seleccionar grupos personalizados de elementos para personalizar. Vamos a sacar CatPhotoApp de nuevo para practicar el uso de los selectores de CSS. Para este desafío, utilizará el selector de atributo <code>[attr=value]</code> para diseñar las casillas de verificación en CatPhotoApp. Este selector combina y diseña elementos con un valor de atributo específico. Por ejemplo, el código siguiente cambia los márgenes de todos los elementos con el <code>type</code> atributo y el valor de <code>radio</code> correspondiente: <blockquote> [tipo = 'radio'] { <br> margen: 20px 0px 20px 0px; <br> } </blockquote></section>
<sectionid="instructions"> Con el selector de atributos de <code>type</code> , intente dar a las casillas de verificación en CatPhotoApp un margen superior de 10 px y un margen inferior de 15 px. </section>
- text: El selector de atributo de <code>type</code> debe usarse para seleccionar las casillas de verificación.
testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|")checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),"The <code>type</code> attribute selector should be used to select the checkboxes.");'
- text: Los márgenes superiores de las casillas de verificación deben ser 10px.
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginTop") === "10px") {count++;}});return (count===3)}()),"The top margins of the checkboxes should be 10px.");'
- text: Los márgenes inferiores de las casillas de verificación deben ser 15px.
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginBottom") === "15px") {count++;}});return (count===3)}()),"The bottom margins of the checkboxes should be 15px.");'