lms
Administrador
- Mensajes
- 7.741
- Puntuación de reacciones
- 2.163
- Puntos
- 2.613
- Sitio web
- xenfacil.com
- País
-
- Versión de XenForo
- 2.1.x
- PayPal
-
- Página web
- Web
Los selectores
Hasta ahora hemos visto la posibilidad de usar etiquetas html como selectores. De esta forma podemos diseñar estilos para cabeceras, enlaces, párrafos ... pero no es una solución lo suficientemente flexible. Enseguida querremos, por ejemplo, establecer distitos estilos segun los tipos de párrafos, por ejemplo para distinguir un menú del contenido de la página, o para distinguir el encabezado del resto de texto, por lo que el selector p se quedará corto.
Mediante las clases podremos definir estilos abstractos, que se podrán aplicar a cualquier etiqueta html. Mediante otros selectores aun mas específicos podemos alterar el estilo de partes muy concretas.
Variantes de selectores:
Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página. El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.
<html> <head> <title>Titulo</title> <style type="text/css"> h1.miclase { color:blue; } .miotraclase {color:green;} </style> </head> <body> <h1 class="miclase">esto aparecería en azul</h1> <h1>esto aparecería como cabecera H1 normal</h1> <h1 class="miotraclase">esto aparecería en verde</h1> <p class="miotraclase">y este párrafo, tambien en verde</p> </body> </html>
Pueden definirse clases para cualquier selector o etiqueta HTML:
h1.verde {color:green;}
o pueden asignarse clases independientemente de las etiquetas HTML a las que pueda afectar. En este último caso se omite en el selector el nombre de etiqueta:
.verde {color:green;}
Por ejemplo:
.Piepagina { font-size: small; }
La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:
<p class="Piepagina"> <h1 class="Piepagina"> <div class="Piepagina"> <span class="Piepagina">
La clase asi definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo <p> </p>; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span
Solo una clase se puede especificar a la vez para cada etiqueta HTML.
P.miclase.miotraclase
sería inválido.
Pero si pueden establecerse clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:
h1.roja {font: 15pt/17pt; color: red;} h1.verde {font: 15pt/17pt; color: green;} h1.azul {font: 15pt/17pt;color: blue;}
y usar una clase u otra en la Página Web como sigue:
<h1 class="roja">Este es un encabezamiento rojo</h1> ... <h1 class="azul">Este es azul </h1> ... <h1 class="verde">Y este .... verde</h1>
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.
Finalmente, tambien podemos asignar mas de una clase a una misma etiqueta:
<head> .mitexto { color: yellow } .mifondo { background-color: blue } </head> ... <h3 class="mitexto mifondo">titulo en amarillo, fondo azul</h3> <p class="mitexto">color amarillo; fondo: el que herede de la pagina.</p>
Selector ID
Mediante el atributo id podemos establecer una identidad única para un único elemento de la página. La sistaxis html sería por ejemplo <p id="menu">, donde especificamos la identidad "menu" para ese unico párrafo.
Al elemento html pueden asignarsele estilos a traves del selector id:
#menu {estilos ...}
o bien
p#menu {estilos ...}
Selectores contextuales
Las reglas de herencia de propiedades entre los distintos estilos definidos permiten crear estilos genéricos por defecto, y estilos por excepción, para elementos concretos.
Por ejemplo, supongamos que queremos dos estilos diferentes,uno para el elemento <em> (enfatizado, cursiva) y otro para el elemento h1 . Ya hemos visto que se haría así:
h1 { color: blue; } em { color: red; }
Y efectivamente, todo el texto enfatizado, dentro o fuera de un encabezamiento h1 se mostrará en rojo. Pero imaginemos que solo deseamos ver en rojo el texto enfatizado que aparezca dentro de una cabecera h1, y que el resto de texto enfatizado siga otro estilo. Esto se puede definir así:
h1 em { color: red; } em{color:green;}
Acabamos de definir un selector contextual. Las palabras enfatizadas se visualizaran en rojo solamente si estan en el contexto (dentro) de un selector h1. En nuestro caso, el elemento em dentro o en el contexto de una cabecera. O dicho de otra forma, cuando el elemento em desciende jerarquicamente de un elemento h1. Por eso a estos selectores se lesllama indistintamente contextuales o descendentes.
Un selector contextual consiste en varios selectores simples (h1 em) separados por un espacio en blanco (no por comas). El navegador, cuando tenga que visualizar texto em, investigará en las definiciones de estilo si existe una regla aislada para ese elemento o si dicho elemento es descendiente de otro, como ocurrirá, en este caso de ejemplo, si em esta dentro de h1. Veamos otro ejemplo:
ul li { font-size: small; } ul ul li { font-size: x-small; }
El primer selector asigna una letra pequeña a los elementos li que esten incluidos en al menos una etiqueta ul. El segundo selector asigna una letra extra-pequeña a los elementos li que dependan de al menos dos etiquetas ul (listas anidadas). El segundo selector, mas específico que el primero, prevalece en este caso. Los items de las listas aparecerán en letra pequeña; y los items de las listas anidadas, en letra extra-pequeña.
Los selectores contextuales pueden definirse en relación con selectores ordinarios, como hemos visto, pero tambien con elementos CLASS, ID, o combinaciones:
div p { font: small "sans-serif"; } .roja h1 { color: red; } #x78y pre { background: blue; } div.roja h1 { font-size: large; }
La primera definición determina que todos los párrafos (p) dentro de un bloque div /div se presentarán con letra sans-serif pequeña, pues dependen jerárquicamente (contextualmente) de dicho elemento div .
La segunda selección determina la presentación en rojo de todas las cabeceras h1 dentro de la clase .roja.
el tercer selector determina que todos los elementos con la etiqueta pre que desciendan de un elemento ID=x78y tendrán fondo azul.
El cuarto selector hará que todas las cabeceras h1 integradas en un bloque div con clase .roja tengan un tipo de letra grande.
Los selectores contextuales se pueden agrupar:
h1 b, h2 b, h1 em, h2 em { color: red; }
que equivale a:
h1 b { color: red; } h2 b { color: red; } h1 em { color: red; } h2 em { color: red; }
Selectores hijos
En el ejemplo anterior h1 em { color: red; } define un estilo para todos los elementos em descendientes de una cabecera h1. Este estilo se aplicaría por ejemplo en estos dos casos:
<h1>Capitulo 1: El retorno del <em>Jedi</em></h1>
<h1>Capitulo 1: <strong>El retorno del <em>Jedi</em></strong></h1>
Pues en los dos casos em desciende de h1. Puede suceder sin embargo que solo quisieramos aplicar el estilo al elemento cuando fuera hijo directo del otro, es decir, en el primer ejemplo y no en el segundo. Esto lo conseguiriamos con esta sintaxis:
h1 > em
donde solo serian seleccionados elementos em directamente descendientes (hijos) de h1.
pseudo clases y pseudo elementos
Los pseudo-elementos son elementos de una página a quienes el lenguaje html no otorga identidad propia (y por tanto no pueden ser seleccionados) pero que si pueden ser identificados por las reglas de estilo.
Por ejempo, no existe ninguna etiqueta html para marcar la primera letra de cada párrafo, o la primera linea. A traves de los pseudo elementos podemos sin embargo acceder a ellas y dotarles de estilo.
Tambien son pseudo elementos aquellos que no existen en el código fuente de la página, pues son generados por las reglas de estilo.
Los pseudo-elementos disponibles en CSS2 son :first-letter :first-line :before y :after
Las pseudo-clases clasifican a los elementos basandose en el estado del elemento, atributos que no puede deducirse de la estructura del documento. Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento, o como ':first-child', depender de la posición de un elemento en la estructura del documento.
Son pseudoclases :first-child :link :visited :hover, :active :focus y :lang
pseudo-elementos :first-letter :first-line
Estos pseudo elementos permiten asignar estilos a la primera letra de un documento, o a la primera línea.
P:first-letter {color: Green;font-size:x-large;}
Estos dos selectores solo pueden utilizarse en conjunción con elementos html formadores de bloque.
Asimismo, unicamente admiten un subconjunto de las propiedades CSS: con :first-letter podrás especificar las propiedades de las fuentes, color, background, text-decoration, vertical-align, text-transform, line-height, float y clear. Con :first-line propiedades de las fuentes, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, y clear.
La pseudo clase :link
Los navegadores normalmente visualizan de forma diferente los enlaces (links ) visitados de los no visitados. En CSS, esta visualización se puede definir a traves de pseudo clases en el elemento o selector a (ANCHOR), con las siguientes posibilidades:
La sintaxis es semejante a la enunciación de clases (CLASS) si bien con dos puntos ":", en lugar de uno solo (a:Visited ... h1.miclase).
Estas definiciones afectarán a todos los elementos a que enlacen con otra página distinta, o con otra sección de la misma página. No afectan al elemento <a name>.
Las pseudo clases pueden ser usadas con selectores contextuales:
a:link img { border: solid blue;}
O combinadas con clases normales:
a.external:visited { color: blue; } <a class="external" href="http://www.otrapagina.com/">link externo</a>
Se pueden especificar todo tipo de fuentes o formatos de texto para estos links (color, tamaño de fuente, grosor de la fuente, color de fondo), o a traves de la propiedad "text-decoration" eliminar, por ejemplo, el subrayado de los links:
a:visited {color: blue; text-decoration: none; }
NOTA Si tienes problemas especificando estilos para los links, ten en cuenta el orden de precedencia de los estilos, que debe ser precisamente el indicado en la primera lista.
Extensión de las pseudoclases
El concepto de pseudo clases dinámicas se extiende con CSS2 a todos los elementos de la página, ya que básicamente cualquier elemento de la página puede tener el puntero del ratón encima (hover) estar seleccionado (active) o tener el foco (focus):
:hover :active :focus
pseudo-clase 'primer hijo'
La pseudo-clase :first-child equivale a un elemento que es el primer hijo de algún otro elemento. Considera este ejemplo:
<div class="capitulo"> <p>primer parrafo del capitulo</p> <p>segundo parrafo del capitulo</p> </div>
Si queremos dar estilo solo al primer párrafo, que es el primer hijo del elemento div, lo especificamos así:
p:first-child { estilo }
O asi, si mas exactamente, queremos señalar solo al párrafo primer hijo de cada capitulo, y no al párrafo primer hijo de otro elemento cualquiera:
div.capitulo > p:first-child { estilo }
Selectores adyacentes
Con estos selectores podemos aplicar estilos a elementos html próximos a otros. En el ejemplo
<h1>Capitulo 1: <strong>El retorno del <em>Jedi</em></strong> de <cite> George Lucas</cite> </h1>
las etiquetas strong y cite son adyacentes
Podriamos aplicar un estilo a cite indicando:
strong + cite { estilo }
donde el estilo se aplicaria al elemento cite siempre que fuese adyacente, apareciera despues de un elemento strong
Seleccionando segun el atributo
Podemos también seleccionar etiquetas html solo si contienen determinado atributo, o si este tiene determinado valor.
Veamoslo con el elemento img que como sabemos, puede contener los atributos alt y title.
img [alt] { estilo } /* selecciona imagenes con atributo alt */ img [alt="mis vacaciones"] { estilo } /* selecciona imagenes con atributo alt cuyo valor sea "mis vacaciones" */
Junto a estas dos variantes principales, [atributo ~="valor"] identifica la etiqueta que contenga "valor" como uno de sus valores de atributo separados por espacios; y la sintaxis [atributo|="valor"] identifica a la etiqueta que contenga el atributo indicado con el valor "valor" en una lista separada por guiones.
Selector universal
El asterisco sirve para seleccionar cualquier elemento html
.green * {estilos}
identifica cualquier elemento html descendente de otro elemento con la clase "green".
A tener en cuenta
Los selectores 'class' y 'id' son excepción a la regla de que en CSS puedes utilizar minusculas y mayusculas. class="piepagina" no es igual a class="PiePagina".
Ninguno de estos dos selectores puede comenzar su denominación con un número. Asimismo, en la primera versión de CSS2, los guiones_bajos estaban prohibidos, y aunque posteriormente se admitieron, su soporte por algunos navegadores es errático, por lo que conviene evitarlos.
Encontrado por la red
Salud2
Hasta ahora hemos visto la posibilidad de usar etiquetas html como selectores. De esta forma podemos diseñar estilos para cabeceras, enlaces, párrafos ... pero no es una solución lo suficientemente flexible. Enseguida querremos, por ejemplo, establecer distitos estilos segun los tipos de párrafos, por ejemplo para distinguir un menú del contenido de la página, o para distinguir el encabezado del resto de texto, por lo que el selector p se quedará corto.
Mediante las clases podremos definir estilos abstractos, que se podrán aplicar a cualquier etiqueta html. Mediante otros selectores aun mas específicos podemos alterar el estilo de partes muy concretas.
Variantes de selectores:
- etiquetas html: cada etiqueta es un posible selector. Por ejemplo un estilo para parrafos y otro para listas.
- clases: selectores abstractos aplicables a cualquier elemento, por ejemplo un estilo aplicable a algún parrafo y/o alguna lista
- selectores contextuales o descendentes, para elementos que esten dentro (desciendan) de otro elemento
- selectores hijos, para elementos que sean directamente hijos de otro elemento
- selectores adyacentes, para elementos que estén próximos a otros
- Selectores por identidad, para un elemento individual
- pseudoclases y pseudo elementos: links, primera letra, primera linea etc
Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página. El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.
<html> <head> <title>Titulo</title> <style type="text/css"> h1.miclase { color:blue; } .miotraclase {color:green;} </style> </head> <body> <h1 class="miclase">esto aparecería en azul</h1> <h1>esto aparecería como cabecera H1 normal</h1> <h1 class="miotraclase">esto aparecería en verde</h1> <p class="miotraclase">y este párrafo, tambien en verde</p> </body> </html>
Pueden definirse clases para cualquier selector o etiqueta HTML:
h1.verde {color:green;}
o pueden asignarse clases independientemente de las etiquetas HTML a las que pueda afectar. En este último caso se omite en el selector el nombre de etiqueta:
.verde {color:green;}
Por ejemplo:
.Piepagina { font-size: small; }
La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:
<p class="Piepagina"> <h1 class="Piepagina"> <div class="Piepagina"> <span class="Piepagina">
La clase asi definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo <p> </p>; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span
Solo una clase se puede especificar a la vez para cada etiqueta HTML.
P.miclase.miotraclase
sería inválido.
Pero si pueden establecerse clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:
h1.roja {font: 15pt/17pt; color: red;} h1.verde {font: 15pt/17pt; color: green;} h1.azul {font: 15pt/17pt;color: blue;}
y usar una clase u otra en la Página Web como sigue:
<h1 class="roja">Este es un encabezamiento rojo</h1> ... <h1 class="azul">Este es azul </h1> ... <h1 class="verde">Y este .... verde</h1>
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.
Finalmente, tambien podemos asignar mas de una clase a una misma etiqueta:
<head> .mitexto { color: yellow } .mifondo { background-color: blue } </head> ... <h3 class="mitexto mifondo">titulo en amarillo, fondo azul</h3> <p class="mitexto">color amarillo; fondo: el que herede de la pagina.</p>
Selector ID
Mediante el atributo id podemos establecer una identidad única para un único elemento de la página. La sistaxis html sería por ejemplo <p id="menu">, donde especificamos la identidad "menu" para ese unico párrafo.
Al elemento html pueden asignarsele estilos a traves del selector id:
#menu {estilos ...}
o bien
p#menu {estilos ...}
Selectores contextuales
Las reglas de herencia de propiedades entre los distintos estilos definidos permiten crear estilos genéricos por defecto, y estilos por excepción, para elementos concretos.
Por ejemplo, supongamos que queremos dos estilos diferentes,uno para el elemento <em> (enfatizado, cursiva) y otro para el elemento h1 . Ya hemos visto que se haría así:
h1 { color: blue; } em { color: red; }
Y efectivamente, todo el texto enfatizado, dentro o fuera de un encabezamiento h1 se mostrará en rojo. Pero imaginemos que solo deseamos ver en rojo el texto enfatizado que aparezca dentro de una cabecera h1, y que el resto de texto enfatizado siga otro estilo. Esto se puede definir así:
h1 em { color: red; } em{color:green;}
Acabamos de definir un selector contextual. Las palabras enfatizadas se visualizaran en rojo solamente si estan en el contexto (dentro) de un selector h1. En nuestro caso, el elemento em dentro o en el contexto de una cabecera. O dicho de otra forma, cuando el elemento em desciende jerarquicamente de un elemento h1. Por eso a estos selectores se lesllama indistintamente contextuales o descendentes.
Un selector contextual consiste en varios selectores simples (h1 em) separados por un espacio en blanco (no por comas). El navegador, cuando tenga que visualizar texto em, investigará en las definiciones de estilo si existe una regla aislada para ese elemento o si dicho elemento es descendiente de otro, como ocurrirá, en este caso de ejemplo, si em esta dentro de h1. Veamos otro ejemplo:
ul li { font-size: small; } ul ul li { font-size: x-small; }
El primer selector asigna una letra pequeña a los elementos li que esten incluidos en al menos una etiqueta ul. El segundo selector asigna una letra extra-pequeña a los elementos li que dependan de al menos dos etiquetas ul (listas anidadas). El segundo selector, mas específico que el primero, prevalece en este caso. Los items de las listas aparecerán en letra pequeña; y los items de las listas anidadas, en letra extra-pequeña.
Los selectores contextuales pueden definirse en relación con selectores ordinarios, como hemos visto, pero tambien con elementos CLASS, ID, o combinaciones:
div p { font: small "sans-serif"; } .roja h1 { color: red; } #x78y pre { background: blue; } div.roja h1 { font-size: large; }
La primera definición determina que todos los párrafos (p) dentro de un bloque div /div se presentarán con letra sans-serif pequeña, pues dependen jerárquicamente (contextualmente) de dicho elemento div .
La segunda selección determina la presentación en rojo de todas las cabeceras h1 dentro de la clase .roja.
el tercer selector determina que todos los elementos con la etiqueta pre que desciendan de un elemento ID=x78y tendrán fondo azul.
El cuarto selector hará que todas las cabeceras h1 integradas en un bloque div con clase .roja tengan un tipo de letra grande.
Los selectores contextuales se pueden agrupar:
h1 b, h2 b, h1 em, h2 em { color: red; }
que equivale a:
h1 b { color: red; } h2 b { color: red; } h1 em { color: red; } h2 em { color: red; }
Selectores hijos
En el ejemplo anterior h1 em { color: red; } define un estilo para todos los elementos em descendientes de una cabecera h1. Este estilo se aplicaría por ejemplo en estos dos casos:
<h1>Capitulo 1: El retorno del <em>Jedi</em></h1>
<h1>Capitulo 1: <strong>El retorno del <em>Jedi</em></strong></h1>
Pues en los dos casos em desciende de h1. Puede suceder sin embargo que solo quisieramos aplicar el estilo al elemento cuando fuera hijo directo del otro, es decir, en el primer ejemplo y no en el segundo. Esto lo conseguiriamos con esta sintaxis:
h1 > em
donde solo serian seleccionados elementos em directamente descendientes (hijos) de h1.
pseudo clases y pseudo elementos
Los pseudo-elementos son elementos de una página a quienes el lenguaje html no otorga identidad propia (y por tanto no pueden ser seleccionados) pero que si pueden ser identificados por las reglas de estilo.
Por ejempo, no existe ninguna etiqueta html para marcar la primera letra de cada párrafo, o la primera linea. A traves de los pseudo elementos podemos sin embargo acceder a ellas y dotarles de estilo.
Tambien son pseudo elementos aquellos que no existen en el código fuente de la página, pues son generados por las reglas de estilo.
Los pseudo-elementos disponibles en CSS2 son :first-letter :first-line :before y :after
Las pseudo-clases clasifican a los elementos basandose en el estado del elemento, atributos que no puede deducirse de la estructura del documento. Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento, o como ':first-child', depender de la posición de un elemento en la estructura del documento.
Son pseudoclases :first-child :link :visited :hover, :active :focus y :lang
pseudo-elementos :first-letter :first-line
Estos pseudo elementos permiten asignar estilos a la primera letra de un documento, o a la primera línea.
P:first-letter {color: Green;font-size:x-large;}
Estos dos selectores solo pueden utilizarse en conjunción con elementos html formadores de bloque.
Asimismo, unicamente admiten un subconjunto de las propiedades CSS: con :first-letter podrás especificar las propiedades de las fuentes, color, background, text-decoration, vertical-align, text-transform, line-height, float y clear. Con :first-line propiedades de las fuentes, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, y clear.
La pseudo clase :link
Los navegadores normalmente visualizan de forma diferente los enlaces (links ) visitados de los no visitados. En CSS, esta visualización se puede definir a traves de pseudo clases en el elemento o selector a (ANCHOR), con las siguientes posibilidades:
- a enlace.
- a:link enlace que no ha sido explorado por el usuario.
- a:visited se refiere a los enlaces ya visitados.
- a:active enlace seleccionado con el ratón
- a:hover enlace con el puntero del ratón encima, pero no seleccionado
- a:focus enlace con el foco del sistema
La sintaxis es semejante a la enunciación de clases (CLASS) si bien con dos puntos ":", en lugar de uno solo (a:Visited ... h1.miclase).
Estas definiciones afectarán a todos los elementos a que enlacen con otra página distinta, o con otra sección de la misma página. No afectan al elemento <a name>.
Las pseudo clases pueden ser usadas con selectores contextuales:
a:link img { border: solid blue;}
O combinadas con clases normales:
a.external:visited { color: blue; } <a class="external" href="http://www.otrapagina.com/">link externo</a>
Se pueden especificar todo tipo de fuentes o formatos de texto para estos links (color, tamaño de fuente, grosor de la fuente, color de fondo), o a traves de la propiedad "text-decoration" eliminar, por ejemplo, el subrayado de los links:
a:visited {color: blue; text-decoration: none; }
NOTA Si tienes problemas especificando estilos para los links, ten en cuenta el orden de precedencia de los estilos, que debe ser precisamente el indicado en la primera lista.
Extensión de las pseudoclases
El concepto de pseudo clases dinámicas se extiende con CSS2 a todos los elementos de la página, ya que básicamente cualquier elemento de la página puede tener el puntero del ratón encima (hover) estar seleccionado (active) o tener el foco (focus):
:hover :active :focus
pseudo-clase 'primer hijo'
La pseudo-clase :first-child equivale a un elemento que es el primer hijo de algún otro elemento. Considera este ejemplo:
<div class="capitulo"> <p>primer parrafo del capitulo</p> <p>segundo parrafo del capitulo</p> </div>
Si queremos dar estilo solo al primer párrafo, que es el primer hijo del elemento div, lo especificamos así:
p:first-child { estilo }
O asi, si mas exactamente, queremos señalar solo al párrafo primer hijo de cada capitulo, y no al párrafo primer hijo de otro elemento cualquiera:
div.capitulo > p:first-child { estilo }
Selectores adyacentes
Con estos selectores podemos aplicar estilos a elementos html próximos a otros. En el ejemplo
<h1>Capitulo 1: <strong>El retorno del <em>Jedi</em></strong> de <cite> George Lucas</cite> </h1>
las etiquetas strong y cite son adyacentes
Podriamos aplicar un estilo a cite indicando:
strong + cite { estilo }
donde el estilo se aplicaria al elemento cite siempre que fuese adyacente, apareciera despues de un elemento strong
Seleccionando segun el atributo
Podemos también seleccionar etiquetas html solo si contienen determinado atributo, o si este tiene determinado valor.
Veamoslo con el elemento img que como sabemos, puede contener los atributos alt y title.
img [alt] { estilo } /* selecciona imagenes con atributo alt */ img [alt="mis vacaciones"] { estilo } /* selecciona imagenes con atributo alt cuyo valor sea "mis vacaciones" */
Junto a estas dos variantes principales, [atributo ~="valor"] identifica la etiqueta que contenga "valor" como uno de sus valores de atributo separados por espacios; y la sintaxis [atributo|="valor"] identifica a la etiqueta que contenga el atributo indicado con el valor "valor" en una lista separada por guiones.
Selector universal
El asterisco sirve para seleccionar cualquier elemento html
.green * {estilos}
identifica cualquier elemento html descendente de otro elemento con la clase "green".
A tener en cuenta
Los selectores 'class' y 'id' son excepción a la regla de que en CSS puedes utilizar minusculas y mayusculas. class="piepagina" no es igual a class="PiePagina".
Ninguno de estos dos selectores puede comenzar su denominación con un número. Asimismo, en la primera versión de CSS2, los guiones_bajos estaban prohibidos, y aunque posteriormente se admitieron, su soporte por algunos navegadores es errático, por lo que conviene evitarlos.
Encontrado por la red
Salud2