Tutorial de CSS - Temarios

Los selectores nos permiten aplicar estilos a un elemento o conjunto de elementos de una página web. Repasemos un poco los selectores vistos hasta este momento:

Selector de un típo de elemento:
```
h1 {
  font-family:Arial;
}
```
Se aplica el tipo de fuente Arial a todos los elementos h1 de la página sin excepción.
```
h1.principal {
  font-family:Arial;
}
```
Se aplica el tipo de fuente Arial a todos los elementos h1 que tienen definida la clase "principal"

h1#titulo1 {
  font-family:Arial;
}

Se aplica el tipo de fuente Arial al elementos h1 que tiene definidida la propiedad id con el valor "titulo1".

Selectores de descendientes: Cuando se definen dos elementos HTML seguidos por uno o más espacios en blanco, las propiedades afectan a los elementos con la segundo elemento contenidos dentro del primer elemento, aunque haya etiquetas intermedias:
```
ul em{
  color:#f00;
}
```
Todos los elementos "em" se mostraran de color rojo siempre y cuando estén contenidos por un elemento "ul".

pagina.html
```
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Esto es una <em>prueba</em>.</h1>
<ul>
  <li>Opción 1 (es la más <em>fácil</em>)</li>
  <li>Opción 2 (es de dificultad <em>media<em>)</li>
  <li>Opción 2 (muy <em>compleja</em>)</li>
</ul>
</body>
</html>
```
estilos.css
```
li em{
  color:#f00;
}
```
En este ejemplo las palabra fácil, media y compleja aparecen de color rojo. Esto debido que están encerradas entre las marcas "em" y están contenidas en un "ul".

Por otro lado la palabra "prueba" no aparece de color rojo ya aunque está encerrada con el elemento "em" dicho elemento no está contenido en una lista no ordenada "ul".
Ahora sí veamos para aplicar "Selector de hijos". La sintaxis es similar a los selectores descendientes con la diferencia que remplazamos el espacio en blanco por el caracter >
```
h1>em {
  color:#0f0;
}
```
Aquí solo se aplica el color #0f0 si em es un elemento hijo directo de h1.

Problema

Plantear una página que contenga en un div dos párrafos y una lista desordenada. Dentro de la lista definir tres items con un párrafo cada uno. Luego definir un selector para que pinte de color azul solo los párrafos que dependen directamente del div.

pagina.html
```
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div>
  <p>Primer párrafo</p>
  <p>Segundo párrafo</p>
  <ul>
    <li><p>opcion 1</p></li>
    <li><p>opcion 2</p></li>
    <li><p>opcion 3</p></li>
  </ul>
</div>
</body>
</html>
```
estilos.css
```
div>p{
  color:#00f;
}
```
Los dos párrafos: "Primer párrafo" y "Segundo párrafo" aparecen de color azul ya que son hijos directos del elemento HTML div, en cambio los tres párrafos contenidos en la lista no se les aplica el estilo definido ya que no son hijos directos del div.

49 - Selector de hijos

Problema

Retornar