Selectores CSS. Avanzados | Oloblogger El otro día nos quedamos por los selectores descendentes como si la cosa acabara ahí, pero realmente...

10 de junio de 2013

Selectores CSS. Avanzados

El otro día nos quedamos por los selectores descendentes como si la cosa acabara ahí, pero realmente todos los selectores CSS combinados pueden recibir este mismo adjetivo de descendentes.

En efecto, combinando selectores siempre podemos buscar determinado selector B que esté contenido dentro de otro A para darle estilo (a él y a todos los que estén dentro de A) pero no podemos darle estilo sólo al A que a su vez tenga dentro un selector B concreto. No podemos ir hacia arriba por así decirlo.

Si aplicamos reglas a A, estas serán para todos los elementos que tengan ese selector y no podremos discriminar en función de si A tiene dentro B, C, D o cualquier otra cosa. Por eso insisto en que CSS siempre es descendente.

Pero aún así las posibilidades son muchas más de las que vimos en el anterior post. Hoy por ejemplo vamos a ver cómo discriminar selectores (hacia abajo) siguiendo una especie de árbol genialógico, para poder seleccionar determinados hermanos, hijos, nietos y demás familia.

Cirugía CSS


Selectores avanzados CSS


Bien, pues como decía, con los selectores básicos se pueden hacer muchísimas cosas, pero con estos que veremos a continuación podremos resolver algunos problemas determinados que nos pueden surgir a la hora de atacar con CSS el elemento exacto que queremos modificar.

Que les haya puesto el adjetivo de avanzados sólo es una manera de clasificarlos para distinguirlos de los básicos, pues como veréis, no tienen mucha dificultad.

Sólo añadir que algunos de estos selectores no serán interpretados por todas las versiones de los navegadores actualmente en comercialización, aunque los de esta entrada son soportados por prácticamente todos incluido IE desde su versión 8.

Para más información podéis ver esta tabla de compatibilidad.

Y para ver toda esta parte seguiré este esquema HTML cuyo código e interpretación son las siguientes:

<div class="adolfo">
  Adolfo Div
  <span class="beatriz">
    Beatriz Span
    <span class="casildo">
      Casildo Span
    </span>
    <div class="daniel">
      Daniel Div
      <div class="felicia">
        Felicia Div
      </div>
    </div>
    <div class="eduardo">
      Eduardo Div
    </div>
  </span>
</div>

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div



Selector de hijos


Familia CSS
Selecciona todos los elementos (hijo) que están contenidos dentro de otros (padre), pero sólo si son hijos directos, es decir, si no hay otras cajas distintas por en medio. Se utiliza un símbolo > entre los selectores simples.

En los descendentes, una vez el elemento cumpla con el selector, todos los otros elementos que haya dentro de él, sea a la altura del "árbol genialógico" que sea, quedaban también afectados por las mismas reglas, pero con este tipo de selector sólo los hijos se verán modificados por las propiedades declaradas. El resto de familia (hermanos, nietos, bisnietos, etc.) del elemento que cumpla -por así decirlo- la condición, no quedarán afectados.

Por tanto las diferencias son dos. Una está en el matiz que aporta la palabra "directo", porque sólo se seleccionará el hijo del par padre-hijo que cumpla lo declarado. Serían como familiares en primer grado descendentes, por lo que no afectaría a un par con mayor grado de separación (padre-nieto, por ejemplo).

Pero como puedo ser más confuso con mis palabras que esclarecedor, ahí va un ejemplo...

(Aplicar a los div que sean hijos directos de otro div un fondo negro y un color de fuente blanco)
div > div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div


Como se puede ver, sólo se cambia el fondo del único div (Felicia) que a su vez es hijo directo de otro div (Daniel).

Si no hubiéramos usado el símbolo de hijo (>) y hubiéramos escrito la regla directamente como div div {background:black; color:white;} (selector descendente simple) se habrían cambiado los fondos de TODOS los div que hubiera dentro del primer div (Adolfo) aún sin ser directos. Esto es Daniel, Eduardo y Felicia. Lo vemos.

(Aplicar a todos los div que estén contenidos dentro de otro div un fondo negro y un color de fuente blanco)
div div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div


Beatriz y Casildo no cambiarían de fondo en ningún caso por ser un span, ni en el caso del ejemplo ni en este último supuesto.


Para ver otro ejemplo ahora buscamos span que sean hijos directos de algún div.

(Aplicar a los span que sean hijos directos de algún div un fondo negro y un color de fuente blanco)
div > span {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div


Beatriz es la única caja que cumple la condición porque por ejemplo Casildo es un span contenido en un div (Adolfo) pero no es hijo directo suyo. Si Felicia fuera un span también cumpliría la condición y su fondo sería negro.


Selector adyacente


Sirve para seleccionar un único elemento que es consecutivo de otro. Ni descendiente directo ni más abajo en el anidamiento, sino a la misma "altura" y justo detrás, sin otros elementos en medio. Para ello se utiliza el símbolo + entre dos selectores.

En este caso buscamos hermanos y además siameses.

(Aplicar a los div que sean justo precedidos por otro div y por ningún otro tipo de elemento)
div + div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div


¿Y cual era el único elemento en el ejemplo que cumplía la condición? Pues eso... Eduardo es el único div precedido (que no dentro) de otro div. Felicia está DENTRO de Daniel y no a la misma altura, por lo que como no son hermanos sino padre e hijo, la regla no le afecta.

E insistiendo en la idea de que CSS sólo se puede usar en sentido descendente el hecho de que haya dos div consecutivos no implica que el estido de div + div se vaya a aplicar a ambos. Como veis sólo se aplica al selector que queda más a la derecha en el selector combinado, el segundo div.


¿Imaginais que sucederá si usamos esto otro?

(Aplicar a los div que sean justo precedidos por un span y por ningún otro tipo de elemento)
span + div {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span
Daniel Div
Felicia Div
Eduardo Div


Exacto. En ese caso se cambia de color el fondo de Daniel porque es el único div hermano adjunto a un span en nuestro esquema de ejemplo.


Nota: Los fondos de cada caja tienen forzado un color de fondo propio (blanco) para que no sea transparente (por defecto) y se vea con el mismo color que el de la caja contenedora.

Lo que sabemos sobre selectores CSS

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

26 comentarios :

  1. Muy buenos dias :3 se ve sencillo xD... me pregunto, es todo? o falta una "tercera parte"? y si es todo... aún no me entero de como puedo utilizarlo en el código de los comentarios para distinguir al autor xD... me podrias dar un empujoncito :C ??

    ResponderEliminar
    Respuestas
    1. Jajaja... Sí que hay tercera parte, pero la verdad es que al final me desvié y no tiene tanto que ver con lo que tú necesitas.

      De todas formas no me funciona del todo bien el código porque he comprobado que las contestaciones a mis propios comentarios también cambian de color, cuando no deberían hacerlo. Pero es posible que algunos de estos selectores que estoy repasando en voz alta puedan ayudarme ;)

      Eliminar
  2. Solo quiero meterle un maldito color de fondo a mis comen xDD TT_TT bueno creo que al final no podre xDD, muchas gracias por tus lecciones n_n!! igual fue muy interesante el código xD... si puedes resolverlo me paso luego :P XDD

    ResponderEliminar
    Respuestas
    1. Como ves voy fastidiado de tiempo y contestando comentarios con más de una semana de retraso. Lo tuyo lo voy a ver, pero te pido paciencia.

      Eliminar
  3. Muy cierto que la "familia" puede ayudar, padres, hijos, hermanos, peo pienso que explicación se queda bastante corta.

    Que hariamos con #id >li > p +span???

    ResponderEliminar
    Respuestas
    1. Lo podemos combinar como quieras pero simplemente se trataría de leer de derecha a izquierda: La regla CSS del selector que propones se aplicaría a los SPAN adyacentes (+) a un Párrafo que fuera hijo (>) de un elemento de LIsta y abuelo (>) de #ID

      Eliminar
  4. Hola Olomán, te he hecho caso y he actualizado casi 300 p'aginas de mi blog de música "Play this music loud", añadiendoles las imagenes de cada banda o artista.

    De todos modos no se si al compartirlos te dará la elección para que escojas esas imagenes y que no aparezca la de "deja un comentario". Sea como sea ya he actualizado casi mitad del blog (he comenzado por los posts mas antiguos y algunos intermedios).Tambien las añado a los posts mas reecientes, claro.

    eMe

    ResponderEliminar
    Respuestas
    1. Bueno, no imaginé que ibas a añadirlas todas porque es un trabajo colosal, pero para tu satisfacción te diré que sí que funciona. Aquí lo puedes comprobar y en Facebook también me salió ;)

      Eliminar
    2. La imagen si sale bien,pero ese es un post nuevo y casi lo daba por hecho. Mi duda iba mas por post antiguos (por ej los del 2007) donde antes seguramente aparecería lo de "deja un comentario" y si ahora aparece la imagen nueva o persiste la anterior,aunque tampoco tienes por qué estar a esas cosas (que bastante curro tienes de por si) y ya te agradezco que me dieras la idea.

      Eliminar
    3. Si hiciste lo mismo en esos antiguos que en el nuevo, funcionará todo exactamente igual ;)

      Eliminar
    4. Bueno, ya están los 620 post actualizados, espero que ahora ya aparezca la imagen de cada artista o banda aunque la duda me venía porque he dejado también las imagenes de "deja un comentario", pero si tu dices que ahora debería ir bien pues yo lo doy por hecho.

      Saludos

      (me voy a poner con lo de twitter)

      Eliminar
    5. Una pregunta, en las busquedas de alguna canción concreta a veces en google aparece por la etiqueta que tiene y no por el titulo y eso me genera un problema porque se abren varios posts con esa etiqueta y al tener los videos en autoplay la pagina no carga bien y es un caos con montón de canciones sonando.

      ¿que puedo hacer para que no suceda?

      Quiero que google tenga en cuanta las etiquetas de manera "informativa" para localizar contenido, pero no quiero que entren por esa etiqueta para que no suceda eso que he contado.

      En entradas que se muestran tengo 1 marcado por ese motivo, pero si entran por la etiqueta se me desbarata el plán y suenan muchas cosas provocando problemas tambien de carga.

      ¿se te ocurre algo para que google tenga en cuenta las etiquetas pero no entren por ellas?.

      (que rollo he soltado en un momento jajaja)

      eMe

      Eliminar
    6. A mí me pasa algo parecido. En mi caso, he quitado el enlace a las etiquetas para que no se acceda a esa página, aunque si escribes la dirección manualmente en la barra de direcciones se puede ver. Eso puedes solucionarlo con redirecciones al home en la configuración de Blogger, pero hay que poner tantas redirecciones como etiquetas tengas.

      Eliminar
    7. Si usas el buscador de Google Custom Search Engine, en la página de configuración puedes excluir las páginas que no quieras que sean indexadas. Por ejemplo, para las etiquetas, excluye esto: http://tublog.blogspot.com/search/label/*

      Eliminar
    8. Ok le echaré un vistazo aunque según lo cuentas podría ser un trabajo de chinos siendo politicamente incorrecto jajaja.

      Lo del twitter de momento he puesto el gadget oficial y cuando tenga tiempo miraré el post que publicaste mas detenidamente.

      Saludos

      Eliminar
    9. Otra opción similar es anular las páginas de etiquetas desde Webmaster Tools según las veas en la lista, pero creo que la solución definitiva es esta, que es cómo yo ese apartado de configuración actualmente.

      Eliminar
    10. Bueno he puesto todo como en la imagen que has puesto.Entiendo que de esta forma si la gente busca una biografía el motor de busqueda sabrá que tengo esa biografía pero la gente no entrará por la etiqueta sino por el post,¿no?.

      Es que quiero que el motor de busqueda tenga en cuenta la etiqueta y sepa que la he puesto pero entren al post indicado y no por dicha etiqueta.

      Se que suena lioso,pero es que uso siempre las mismas etiquetas, por ejemplo en todos los post de traducciones pongo:
      "Biografía, español, Letra, lyrics, significado, Traducción, traducida, vídeo, wiki"

      Y en todos los post sobre grupos que cantan en español pongo:
      "Biografía, Letra, lyrics, vídeo, wiki".

      Tengo miedo que con estos cambios desaparezca del buscador la relevancia para la busqueda de esas etiquetas, o incluso ese resultado que aparecía por etiqueta al buscarlo por ej. en el puesto 3 del buscador ya no aparezca.

      Porque al final prefiero aparecer como tercer resultado aunque sea entrando por una etiqueta a que ese resultado desaparezca.¿no se si me explico?.

      Saludos

      Eliminar
    11. Pues no, eMe. Eso es para que Google no indexe las páginas de etiquetas, por lo que tampoco saldrán en los resultados de búsqueda. Pero sí... así la gente no entrará por etiquetas, sino por post.

      Las páginas de etiquetas no sé qué relevancia tendrán, pero dan más inconvenientes que ventajas: son contenido duplicado.

      Eliminar
  5. OLOman fijate que subi un video a blogger, tardo cargado como media hora, pero por error borre el codigo html del video me puedes ayudar, donde encuentro ese video, mi blog es, http://batmanonlinegratis.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Falleció al borrarlo Manuel. RIP. Lo siento.

      Eliminar
  6. Hola otra vez, ayer me olvidé de decirte que antes me llamaba "Milú" y por eso ahora no reconocias el nombre. Bueno, a lo que iba:

    Estoy usando el script antiguo de twitter que tenías tu tambien instalado en una plantilla anterior. El caso es que lo había instalado en mis 4 plantillas y funcionaba muy bien, pero los últimos 4 dias no aparece nada de nada dentro de la dichosa "cajita". A ver si te puedes pasar por una de mis paginas (la de play this music loud mismamente) y ves si averiguas a que es debido. Ya sabes que te estaría eternamente agradecido.

    Saludos

    ResponderEliminar
    Respuestas
    1. Pues miré en mi tutorial y efectivamente dejó de funcionar. Creo que es porque Twitter ha cambiado a una versión más moderna y ha suprimido esa pero no lo he podido ver esta semana que pasó. A ver si esta que entra tengo un rato y publico algo.

      Eliminar
    2. Ok, estaré atento a tus post sobre el tema.

      Saludos y gracias otra vez.

      eMe

      Eliminar
    3. Ya tengo una solución (ver esta misma página abajo del todo), pero ahora la tengo que publicar.

      Eliminar
  7. Cuál es el código css del primer ejercicio para que aparezcan las cajas contenedoras así como tu las tienes con esos colores y bordes?

    ResponderEliminar
    Respuestas
    1. Este:

      div.adolfo {
      color: red; border:4px solid red;padding:10px;margin: 10px;display:block;background: #fff;
      }
      span.beatriz {
      color: purple;border:4px solid purple;padding:10px;margin: 10px;display: block;background: #fff;
      }
      span.casildo, div.daniel, div.eduardo {
      color: orange;border:4px solid orange;padding:10px;margin: 10px;display:block;background: #fff;
      }
      div.felicia {
      color:blue;border:4px solid blue;padding:10px;margin: 10px;display:block;background: #fff;
      }

      Eliminar