SelectoresA través de los selectores podemos indicar al navegador a qué elementos de html queremos que se apliquen los estilos cuando los estemos definiendo en bloque o en una hoja de estilos externa. El más importante es el selector universal, el asterisco, que nos sirve para aplicar a todos los elementos: Por ejemplo, este código está definiendo un margen y un padding igual a cero para todos los elementos de la página, sin excepción. * { Selector de tipo o etiquetaSimplemente designa a qué etiqueta de html o xhtml hay que aplicarle los estilos. Por ejemplo, esta regla indica que se le aplique color rojo a todo aquel texto que esté dentro de una etiqueta <p> p { color:red; } Selector descendienteUtilizado para aplicarse a elementos que estén dentro de otros elementos. En el siguiente ejemplo se le aplica color rojo al texto que esté dentro de un em que a su vez esté dentro de un párrafo. p em { color:red; } Selector hijoFunciona de una manera parecida al selector descendiente, pero es mucho más específico que éste. p > em { color:red; } ¿Cuál es la diferencia? Pues que si el em estuviese dentro de otro elemento dentro del párrafo, por ejemplo un span, sería "nieto" (para entendernos), no hijo del p, por lo tanto no se aplicaría el texto en color rojo. En cambio si fuese un selector descendiente normal sí se aplicaría, porque se aplica a todos los em dentro del p, sea cual sea el nivel de profundidad. Selector hermano adyacenteEste selector se usa para aplicar la regla a un elemento que está a continuación de otro. Por ejemplo, es muy útil para separar párrafos que van unos a continuación de otros en el html. p + p { margin-top:10em; } Selectores de atributoPermiten aplicar las reglas css en función de los atributos del elemento. El siguiente ejemplo aplica un margen a todas las imágenes que dispongan del atributo alt: img[alt] { margin:10em; } Se puede ser más específico, y aplicárselo a todas aquellas imágenes que tengan un alt exactamente igual a "logo": img[alt=logo] { margin:10em; } Si lo que se pretende es referenciar una imagen que contenga la palabra "logo" dentro de una lista de palabras separadas por espacios, por ejemplo, dentro del atributo alt: img[alt~=logo] { margin:10em; } Y finalmente tenemos: *[lang|="es"] { color:#d2d2d2; } Que aplica el estilo a cualquier elemento que contenga "es" en una lista de palabras separadas por guiones en el valor del atributo lang. Selectores de claseLas clases nos permiten seleccionar directamente un elemento en concreto a través de su nombre independientemente del tipo de elemento que sea. Por ejemplo, identificando este párrafo como "mitexto": <p class="mitexto">Lorem ipsum dolor sit amet,consectetur Y ahora podemos poner ese texto en itálica indicando el nombre de la clase con un "." delante, así: .mitexto{ font-style: italic; } Selectores de IDFuncionan de manera parecida a las clases, pero con una sutil diferencia que es muy importante, no puede haber más de un elemento con la misma ID en la misma página html. Si el párrafo del ejemplo anterior es una introducción al texto y le añadimos una ID para diferenciarlo de los demás párrafos con la clase "mitexto", el código html/xhtml sería: <p class="mitexto" id="introduccion"> En la hoja de estilos se marca el ID con el símbolo "#" . .mitexto{ font-color: #000; } Obviamente no es necesario que haya definida una clase para que haya un ID. <p id="introduccion">Lorem ipsum dolor sit amet, Con esta CSS tendríamos el mismo resultado visual: #introduccion {
Importante: cada atributo ID debe ser único en cada página web del sitio. Si es necesario aplicárselo a varios elementos, entonces se debe definir una clase, no una ID. |