Crea tu Web: Indice de diseño

Nuevos Selectores

Recordando un poco los selectores en CSS: son las etiquetas que identfican un estilo concreto. Por ejemplo

.micaja{
      backgrund: #fff;
      type: Arial;
}

Describe una clase que en la página web se usa como 

<div class="micaja">contenido </div>

En CSS3 aparecen tres nuevos selectores que aumentan considerablemente las posibilidades para controlar cuando y donde aplicar un determinado estilo:

  • elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
  • a[href^="https://"]{color=red}

    Todos los enlaces a páginas que comienzan con https estarán en rojo

  • elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
  • img[src$=".gif"] { border=2}

    Todas aquellas imágenes tipo gif llevarán un borde de 2 px

  • elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor sea igual a la cadena de texto indicada.
  • p[title="importante"]{color:red; font-weight:bold;}

    Todos los elemento p cuyo atributo title sea la palabra importante se colocan en color rojo y en negrita

  • elemento[atributo~="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada, puede tener otras valores.
  • p[title="nota importante"]{color:red; font-weight:bold; font-size:18px}

    Todos los elemento p cuyo atributo title contenga la palabra importante, puede contner otras, se colocan en color rojo, en negrita y con texto de 18px

    Estos selectores amplían la forma de aplicar los estilos, ya no se aplican solo en función del tipo de elemento, del atributo id o class, podemos aplicar estilos en función del contenido.

 

 

arriba


Comunidad Virtual. Alojamiento gratis