CSS: selectores avanzados
Articles,  Blog

CSS: selectores avanzados


hola soy un man fernando de garcía desarrollador web y en este vídeo que forma parte del curso de introducción al desarrollo web voy a explicar los selectores tss avanzados puedes encontrar mi web whitman fernández punto com y en twitter como pie izquierdo también puedes contactar conmigo a través de mi correo electrónico guzmán punto fg gmail.com en el vídeo selectores tss vimos los electores básicos otros electores como los electores de enlace según restado recombinación de selectores y la agrupación de reglas css2 incluyó algunas mejoras para realizar selecciones como las que veremos a continuación menudo pretendemos seleccionar el cierto nivel de anidamiento pero las reglas se nos van de las manos en el ejemplo vemos cómo seleccionar los elementos de una lista desordenada pero porque se seleccionan todos como verás todos los elementos cumplen la regla están dentro de una etiqueta o l y son etiquetas li en un primer momento se nos ocurriría que la lista anidada cumple con el esquema y que dándole un identificador a la principal se soluciona el problema la idea es buena pero observa que sigue cumpliendo es la regla dentro de la lista desordenada con un identificador lista hay 5 ítems pero cambio de color para que se vea mejor puedo parecer pesado pero no te imaginas la cantidad de veces que he visto casos como éste vale vale ya lo solucionamos si entre el selector de la etiqueta superior en este caso a la lista con identificador lista y el de las etiquetas anidadas incluimos el carácter mayor que sólo se seleccionará en los elementos en leh y que sean descendientes directos desafortunadamente ni siquiera en css3 existe el carácter menor que para seleccionar etiquetas padre seguro que te encontrarás con casos en los que quieren aplicar estilos a ciertos elementos dependiendo de si tienen otro elemento junto a ellos o no en el ejemplo puedes ver cómo funciona el selector más entre dos elementos en este caso se aplicarán los estilos a todos los elementos span que estén tras una imagen con clase yum ojo solo los inmediatamente contiguos en este caso no se aplicaría en el estilo la palabra php ya que no sucede inmediatamente a una imagen con clase n o puede que quieras destacar el primer elemento de la lista y ya que nos ponemos porque no poder darle estilos a la primera línea un párrafo a la primera letra de un texto el selector tus puntos fairchild de forma conjunta a un elemento en el ejemplo ley aplica la regla al primer elemento de ese tipo que además sea el primero anidado en este caso en la etiqueta l en este otro como el primer l y con clase en letra no es el primero de su grupo no se aplicará el estilo si hay un selector la sal pero sólo a partir de css3 y entrar ahí sería salirnos de tema siguiendo con los primeros de la fila el selector dos puntos first letter es bastante más intuitivo se aplica a la primera letra del texto del elemento seleccionado puede servirte por ejemplo para simular letras capitales por último el selector dos puntos first line se aplica a la primera línea del texto del elemento seleccionado en el ejemplo esforzado el salto de línea puesto que no tengo espacio para más sin embargo en los códigos de ejemplo disponibles incluido un párrafo lo suficientemente largo como para que tenga más de una línea efectivamente con dos puntos first line sólo se aplicará a la primera línea de este párrafo no es necesario insertar saltos de línea y por qué no utilizar otros atributos proponer ciertas etiquetas para darles estilos vamos a darlos el código html que utilizan en esta parte muestra tres párrafos con un enlace cada uno cuyos diferentes atributos pero ya te sean familiares si especificamos entre corchetes el nombre de un atributo en este caso title los estilos se aplicarán a todos los elementos que tengan un atributo title no importa cuál sea su valor si quieres especificar más puedes igualar el atributo a una cadena de texto en este caso escribimos teletón igual al buscador ojo distingue en mayúsculas de minúsculas si escribiese hemos buscador con minúscula no se aplicarían los estilos al enlace además si en la carrera que vas a especificar aparecen caracteres no alfanuméricos es muy posible que necesites entrecomillar la por ejemplo si quisiéramos hacer referencia a todos los enlaces vacíos a aquellos cuyo atributo h ref es igual la tablilla oa los enlaces cuyo atributo title fuera igual a la cadena página del curso necesitaríamos especificar tanto la tablilla como la frase entre comillas las comillas no molestan por lo que te recomiendo utilizarlas siempre para seleccionar elementos cuyo atributo empieza por una palabra como puede ser top en el caso de los identificadores de los enlaces del ejemplo añadimos la barra vertical prefiriendo al símbolo ‘igual’ en la distribución del teclado en español puedes encontrar este carácter en la tecla 1 el valor del atributo del elemento debe ser la palabra completa como el caso que vimos anteriormente si la barra vertical o seguida del guión como en el ejemplo y uno más mediante la villa o tilde de la ñ en la tecla 4 para teclados con distribución en español o alt + 126 de tu teclado numérico podemos especificar que el atributo contenga una palabra esta vez el valor del elemento si puede estar separado por espacios en el ejemplo destacamos todos los enlaces cuya atributo title contenga la palabra curso para que los selectores de tipo atributo funcionen correctamente en internet explorer 8 es necesario que declaren stock type no sé si te resultará interesante destacar las palabras o textos en otro idioma pero también es posible centralizar este comportamiento sin necesidad de trabajar con clases dos puntos line y entre paréntesis el código del idioma según la iso 639 selecciona todas las etiquetas cuyo valor del atributo online coincida con la especificada entre paréntesis como en el ejemplo ten cuidado ya que algunos desarrolladores incluimos el idioma principal de la página en la etiqueta html si le das estilos a este idioma se aplicará a todos los elementos de tu documento html no conoces la iso 639 no te preocupes te dejo un enlace al final del documento mediante css también es posible incluir contenido antes o después de la etiqueta seleccionada algo no muy recomendado ya que el contenido y el estilo deberían separarse pero bien utilizado ese contenido tiene más que ver con estilos que con contenido en sí y consigue que esta regla tenga sentido por ejemplo voy a incluir el texto nuevo detrás de todos los enlaces cuya clase sea new y de ep delante del enlace cuya clase sea te presento el selector universal si algo tan sencillo como un asterisco puede arruinar tu hoja de estilos cuando se incluyen una regla el selector universal selecciona todos los elementos sin mirar caras cuando lo utilizarás probablemente nunca al menos yo desaconsejó su uso es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta algunos autores lo utilizan para que todos los navegadores empiecen sin estilos o para forzarle unos a esta técnica se le denomina css research y existen otras formas menos agresivas de llevarla a cabo te dejo un enlace al final del vídeo en resumen hemos visto cómo seleccionar descendientes directos mediante el símbolo mayor que elementos contiguos gracias al carácter más como seleccionar el primer elemento de un grupo o la primera letra o la primera línea del texto utilizando dos puntos la selección de elementos con atributos especificando los entre corchetes cómo aplicar estilos a etiquetas en otros idiomas con dos puntos line y a insertar contenido mediante css utilizando dos puntos before y dos puntos after y si también intenté convencerte de que no utilices el selector universal asterisco para terminar te dejo unos consejos que espero te sean de utilidad reinicia la hoja de estilos para que todos los navegadores empiecen con los mismos estilos por defecto en la medida de lo posible no utilices el selector universal para esta tarea en su lugar busca un cese de servicio que te guste cuidado con las reglas a partir de selectores del nuevo estándar css3 seguramente no se apliquen a navegadores antiguos simplifica los documentos html de esta forma no tendrás que utilizar reglas complejas en css y usar clases para centralizar y estandarizar estilos sobre todo en lo que a colores y tipografías se refiere puedes consultar el uso de los selectores vistos en este vídeo y los de css3 en la página de la double you to be schools te dejo el enlace a la iso 639 1 como te dije la iso 639 tiene más de una parte en la que se especifican más idiomas pero incluir enlaces a todas las partes de la iso me pareció un poco friki y no creo que llegas a necesitar los para reiniciar estilos en lugar de utilizar el selector universal puedes utilizar el csd service set de eric mayer uno de los mejores que encontrarás en la web te recuerdo que puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter y que este vídeo forma parte del curso de introducción al desarrollo web disponible en la dirección web punto es muchas gracias por tu atención

4 Comments

  • Carroña

    Hola, muchas gracias por el video. Me queda una duda, al no quitarle el subrayado al enlace y agregar un content con after o before este contenido conserva el subrayado, ¿Se podria dar estilo a este "content"? Intente con text-decoration:none; solo para el content, pero no colo. ¿Esto lo define el navegador?

  • Guzmán Fernández García

    Disculpa la tardanza, en mi perfil no aparecen notificaciones de comentarios en los vídeos del curso y acabo de leer tu comentario.

    Si te soy sincero, no suelo utilizar esa funcionalidad de CSS, aunque tu pregunta me parece muy interesante.

    Según el estándar, ese pseudo-contenido debería tener el mismo estilo que el enlace, siempre, y que yo sepa no hay manera de cambiarlo.

    Como siempre, según el estándar quiere decir que cada navegador puede hacer lo que le plazca, si no cumple estándares.

  • Guzmán Fernández García

    No obstante, el artículo de Cris Coyier me ha dado una idea (css-tricks[punto]com[barra]css-content)

    ¿Qué tal si inserto contenido HTML en content para poder darle estilos? Bien, esto no es posible, dado que content inserta texto, no HTML.

    Si tienes más dudas, puedes contactar conmigo por e-mail 🙂

    Salud.

  • carlos loureda parrado

    Al igual que fui crítico en otros vídeos, este me ha encantado. Debo revisar algo de css básico del tema anterior que con lo de content me he perdido, pero en cosa de 9 minutos he aprendido cosas muy curisosas de CSS. Gracias, a seguir así

Leave a Reply

Your email address will not be published. Required fields are marked *