Permiten seleccionar elementos a los que aplicar estilos que tienen ciertos atributos y/o valores de atributos concretos.
- Selector CSS [atributo]: aplica el estilo a los elementos que tengan definido el atributo, independientemente de su valor.
- Selector CSS [atributo="valor"]: aplica el estilo a los elementos que tengan definido el atributo, independientemente de su valor.
Estilo elmentos input con atributo value
input[value]{
background-color: green;
}
Estilo elmentos input con atributo type="text"
input[type="text"]{
background-color: orange;
}
Estilo para elementos cuyo atributo contiene una palabra completa concreta
input[title~="alerta"]{
background-color:red;
}
Estilo para elementos cuyo atributo comience por una palabra completa concreta
.top{
.top{
font-family: verdana;
}
.top-red{
font-family: verdana;
color: red;
}
.topmost{
font-family: verdana;
color: blue;
}
[class|="top"] {
background-color: lightgray;
}
Clase "top" se le aplica el fondo
Clase "top-red" se le aplica el fondo
Clase "topmost" no se le aplica el fondo
Estilo para elementos cuyo atributo comience por los caracteres especificados en el valor
.bottom{
font-family: verdana;
}
.bottom-red{
font-family: verdana;
color: red;
}
.bottommost{
font-family: verdana;
color: blue;
}
[class^="bottom"] {
background-color: lightgray;
}
Clase "bottom" se le aplica el fondo
Clase "bottom-red" se le aplica el fondo
Clase "bottommost" también se le aplica el fondo
Estilo para elementos cuyo atributo finaliza una subcadena concreta
.end{
font-family: verdana;
}
.notend{
font-family: verdana;
color: red;
}
.page-endone{
font-family: verdana;
color: blue;
}
[class$="end"] {
background-color: lightgray;
}
Clase "end" se le aplica el fondo
Clase "notend" se le aplica el fondo
Clase "page-endone" no se le aplica el fondo
Estilo para elementos cuyo atributo contiene una subcadena concreta
.main{
font-family: verdana;
}
.notmain{
font-family: verdana;
color: red;
}
.page-mainone{
font-family: verdana;
color: blue;
}
[class*="main"] {
background-color: lightgray;
}
Clase "main" se le aplica el fondo
Clase "notmain-red" se le aplica el fondo
Clase "page-mainone" también se le aplica el fondo
Inicio