Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS selectores de atributos


Elementos de estilo HTML con atributos específicos

Es posible que el estilo de los elementos HTML que tienen atributos específicos o valores de atributos.


CSS [atributo] Selector

El [attribute] selector se utiliza para seleccionar elementos con un atributo especificado.

El siguiente ejemplo selecciona todos los <a> elementos con un atributo de destino:

Ejemplo

a[target] {
    background-color: yellow;
}
Inténtalo tú mismo "

CSS [atributo = "valor"] Selector

El [attribute="value"] selector se utiliza para seleccionar elementos con un atributo y valor especificado.

El siguiente ejemplo selecciona todos los <a> elementos con un target="_blank" atributo:

Ejemplo

a[target="_blank"] {
    background-color: yellow;
}
Inténtalo tú mismo "

CSS [atributo ~ = "valor"] Selector

El [attribute~="value"] selector se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra especificada.

El siguiente ejemplo selecciona todos los elementos con un atributo de título que contiene una lista separada por espacios de palabras, uno de los cuales es " flower ":

Ejemplo

[title~="flower"] {
    border: 5px solid yellow;
}
Inténtalo tú mismo "

El ejemplo anterior coincidirá con los elementos title="flower", title="summer flower" , y title="flower new" , pero no title="my-flower" o title="flowers" .


CSS [atributo | = "valor"] Selector

El [attribute|="value"] selector se utiliza para seleccionar elementos con el atributo especificado empezando con el valor especificado.

El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "top" :

Nota: El valor tiene que ser una palabra completa, ya sea solo, como class="top" , o seguido de un guión ( - ) , como class="top-text" !

Ejemplo

[class|="top"] {
    background: yellow;
}
Inténtalo tú mismo "

CSS [^ atributo = "valor"] Selector

El [attribute^="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo comienza con un valor especificado.

El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "top" :

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo

[class^="top"] {
    background: yellow;
}
Inténtalo tú mismo "

CSS [atributo $ = "valor"] Selector

El [attribute$="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo termina con un valor especificado.

El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con "test" :

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo

[class$="test"] {
    background: yellow;
}
Inténtalo tú mismo "

CSS [* atributo = "valor"] Selector

El [attribute*="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor especificado.

El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene "te" :

Nota: El valor no tiene por qué ser una palabra completa!

Ejemplo

[class*="te"] {
    background: yellow;
}
Inténtalo tú mismo "

Formas de estilo

Los selectores de atributos pueden ser útiles para las formas de peinado sin class o ID :

Ejemplo

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
Inténtalo tú mismo "

Consejo: Visita nuestra Tutorial Formas CSS para más ejemplos de cómo el estilo formularios con CSS.


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»


Más ejemplos de selectores CSS

Utilice nuestro selector del probador de CSS para demostrar los diferentes selectores.

Para una referencia completa de todos los selectores CSS, por favor vaya a nuestro CSS Selectores de referencia .