En CSS tenemos los Selectores ya estudiados en la lecion 3 de este curso
En esta entrava voy tentar explicar como funcionan los selectores de los atributos
Supongamos que tenemos un enlace
Ejemplo del codigo del enlace
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
Como ya sabemos el a es un selector pero el href es un atributo
Si queremos poner un estilo al atributo, como lo hariamos
Para que se entienda bien el ejemplo, voy a poner varios ejemplos
Selector
Vamos a poner un estilo solo al selector e mostrar el resultado
Ejemplo
<style> a{ background-color: yellow; } </style><br> <a href="http://" target="_blank" rel="noopener noreferrer">disney.com</a>Salida
disney.com
...
Selector de [atributo] CSS
Para poner estilos a un atributo hariamos de la seguinte forma:
Sintaxis
a[atributo] {
//estilos a aplicar
}
El resultado es lo mismo que el anterior, porque si ponemos estilos al selector, sus hijos heredan sus estilos
Pongo el ejemplo
<style> a [target]{ background-color: yellow; } </style><br> <!--El codigo --> <a href="http://" rel="noopener noreferrer">Sin atributo</a> <a href="http://" target="_blank" rel="noopener noreferrer">disney.com</a>Salida
Con el atributo target
Selector CSS [atributo="valor"]
Los selectores [atributo="valor"] se utiliza para seleccionar elementos con un especificado atributo y valor.
El siguiente ejemplo selecciona todos los elementos <a > con un atributo target="_blank":
Ejemplo
<style>
a[target="_blank"] {
background-color: yellow;
}
</style><br>
<!--El codigo -->
<a href="https://frioyelectronica.blogspot.com">frioyelectronica.com</a>
<a href="https://google.com" target="_blank">Google.com</a>
<a href="https://Microsoft.com" target="_top">Microsoft.org</a>
//Salida del Codigo
Frioyelectronica.blogspot
google.com
Microsoft.org
Como podemos observar solo el enlace que tiene el atributo target="_blank ha cambiado de color
Los demas enlaces siguen originalmente
El selector [atributo~="valor"]
Los selector [atributo~="valor"] se utiliza para seleccionar elementos con un atributo valor que contiene una palabra especificada.
El siguiente ejemplo selecciona todos los elementos con un atributo de título que contiene una lista de palabras separadas por espacios, una de las cuales es "flor":
Codigo del ejemplo
Ejemplo
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
<!--El codigo -->
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg" title="klematis flower" width="150" height="113">
<img src="https://cdn.pixabay.com/photo/2019/02/28/15/39/landscape-4026168_960_720.jpg" title="flower" width="224" height="162">
<img src="https://cdn.pixabay.com/photo/2018/04/19/16/06/flower-3333511_960_720.jpg" title="tree" width="200" height="358">
Como lo vemos
Si observamos el codigo e el ejemplo llegaremos a la conclusion de que todos los elementos con la palabra flower en su atributo title tienen un marco amarillo, los demas elementos no cojen estos estilos
Selectores [atributo|="valor"]
Los Selectores [atributo|="valor"] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor puede ser exactamente el valor especificado, o el valor especificado seguido de un guión (-)
Nota: El valor tiene que ser una palabra completa, ya sea sola, como class="top", o seguido de un guión(-), como class="top-text".
Codigo del ejemplo
<style>
[class|="top"] {
background: yellow;
}
</style>
<!--El codigo -->
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Bienvenido</h1>
<p class="top-text">Hola Mundo!</p>
<p class="topcontent">Como vas con el CSS?</p>
El ejemplo lo veremos asi:
Selector [attribute|="value"]
Bienvenido
Hola Mundo!
Como vas con el CSS?
Selector de [atributo^="valor"] de CSS
El Selector de [atributo^="valor"] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor comienza 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 no tiene que ser una palabra completa!
Codigo del ejemplo
<style>
[class^="top"] {
background: yellow;
}
</style>
<!--El codigo -->
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Bienvenido</h1>
<p class="top-text">Hola Mundo</p>
<p class="topcontent">Como vas con el CSS?</p>
Como lo vemos?
CSS [attribute^="value"] Selector
Bienvenido
Hola Mundo
Como vas con el CSS?
Selector CSS [atributo$="valor"]
Los Selector CSS [atributo$="valor"] se utiliza para seleccionar elementos cuyo atributo valor termina con un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con "test":
La palabra tiene que tener test pero no tiene por que ser la palabra completa
Codigo del ejemplo
<style>
[class$="test"] {
background: yellow;
}
</style>
<!--el codigo -->
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
Como se ve?
CSS [attribute$="value"] Selector
Alguntexto en el parrafo
Selector [atributo*="valor"]
Los selector [atributo*="valor"] se utiliza para seleccionar elementos cuyo atributo valor contiene un valor especificado
Todas las clases que contegan te en su descricion seran selecionadas por el selector e se les aplicaran los estilos
Codigo del ejemplo
<style>
[class*="te"] {
background: yellow;
}
</style>
<!--el codigo -->
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">El primero elemento div</div>
<div class="second">El segundoelemento div.</div>
<div class="my-test">El terceroelemento div</div>
<p class="mytest">Mas texto nel parrafo.</p>
Como se ve?
CSS [attribute*="value"] Selector
Estilos
De esta forma podemos desinar un formulario sin clases ni Id solamente con ponermos estilos a sus selectores y atributos lo podemos conseguir
Codigo del ejemplo
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
<!--El codigo -->
<form name="input" action="" method="get">
PrimeroNombre:<input type="text" name="Name" value="Manolo" size="20">
Apellido:<input type="text" name="Name" value="Velazques" size="20">
<input type="button" value="Buton de Ejemplo">
</form>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias