Uso de id en CSS
Al utilizar id están disponibles todas
las manipulaciones con selectores que estudiamos
en lecciones anteriores.
Ejemplo
Supongamos que tenemos el siguiente código:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Seleccionemos h2 del elemento con id
igual a block y pintémoslo de color rojo:
#block h2 {
color: red;
}
Y ahora seleccionemos p del elemento con
id igual a block y pintémoslo
de color verde:
#block p {
color: green;
}
Ejemplo
Supongamos ahora que tenemos el siguiente código:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Seleccionemos los elementos con clase header,
que están dentro del elemento con id
igual a block, y pintémoslos
de color rojo:
#block .header {
color: red;
}
Y ahora seleccionemos los encabezados h2 con clase
header, que están dentro del elemento
con id igual a block, y pintémoslos
de color rojo:
#block h2.header {
color: red;
}
Problemas prácticos
Escriba un selector que seleccione todos los h2
que están en el elemento con id igual a
elem. Compruebe su selector en el siguiente
código:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Escriba un selector que seleccione todos los elementos
con clase text, que están en el elemento
con id igual a elem. Compruebe
su selector en el siguiente código:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Escriba un selector que seleccione todos los párrafos
con clase text, que están en el elemento
con id igual a elem. Compruebe
su selector en el siguiente código:
<div id="elem">
<p class="text">+++</p>
<p class="text">++u+</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Escriba un selector que seleccione todos los li
con clase text, que están en el elemento
con id igual a elem. Compruebe
su selector en el siguiente código:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
