Selector de atributo básico en CSS3

En esta clase vamos a estudiar el selector de atributo básico en CSS3. Este tipo de selectores al igual que los anteriores, nos permiten seleccionar diferentes etiquetas html en función a ciertos criterios. En este caso a los atributos de cada etiqueta.

Recuerda que un atributo es aquel valor que nosotros podemos colocar en la apertura de una etiqueta html. Podemos asignar diferentes valores en función a cada atributo. A los id´s, solo podemos asignarles un nombre, pero para los atributos de tipo class, podemos asignar múltiples valores o clases separadas por espacios. En función a los diferentes atributos que posee cada etiqueta, podremos seleccionarlas.

La definición exacta para el selector de atributo básico en CSS3 seria: Los selectores nos permiten seleccionar etiquetas, en base a su atributo o inclusive en base al valor del atributo. Es decir, vamos a poder seleccionar diferentes etiquetas, que ningún otro selector nos permitía seleccionar.

Su sintaxis es la siguiente:

Este selector está diciendo que va a seleccionar todas las etiquetas <img>, que tienen el atributo alt definido.

/* CSS */

img[alt] { background: red; }

Selector de atributo básico

Por el momento vamos a estudiar el selector de atributo básico. Este selector nos permite seleccionar un elemento html basándose en su atributo, independientemente de su valor. No os preocupéis, también vamos a estudiar el selector se atributo con valor.

Ejercicio 1

Seleccionar aquel párrafo que tiene definido un atributo title?

<!-- HTML -->

<p>Párrafo 1</p>
<p title="principal">Párrafo 2</p>
<p>Párrafo 3</p>

p[title] { background: red; color: white; padding: 10px; }

Ejercicio 2

Selecciona solo los párrafos que están dentro de <section>, pero solo aquellos que tienen definido un atributo class, al margen del valor de este atributo.

<!-- HTML -->

<section>
<p class="1">Párrafo 1</p>
<p class="2">Párrafo 2</p>
<p>Párrafo 3</p>
</section>

section p[class] { background: blue; color: white; padding: 10px; }

Ejercicio 3

Selecciona aquellas etiquetas que tienen un atributo class con el valor uno pero, que tienen definido un atributo title.

<!-- HTML -->

<section>
<p class="uno title="Mi primer parrafo">Párrafo 1</p>
<p class="dos">Parrafo 2</p>
<p class="tres">Parrafo 3</p>
<p>Parrafo 4</p>
</section>

.uno[title] { background: green; color: white; padding: 10px; }

Ejercicio 4

Selecciona todos los párrafos que están dentro de un <section>, pero que tienen definido un atributo class sin tener en cuenta su valor, y que también tengan definido un atributo title sin tener en cuenta el valor del atributo title.

<!-- HTML -->

<section>
<p class="uno title="Mi primer párrafo">Parrafo 1</p>
<p class="dos">Parrafo 2</p>
<p class="tres">Parrafo 3</p>
<p>Parrafo 4</p>
</section>

section p[class][title] { background: orange; color: blue; padding: 10px; }

Ejercicio 5

Selecciona aquellas etiquetas <p> que están dentro de un <section>, que tienen una clase definida y que también tienen un id definido.

<!-- HTML -->

<section>
<p class="uno title="Mi primer parrafo">Parrafo 1</p>
<p class="dos">Parrafo 2</p>
<p class="tres" id="miid">Parrafo 3</p>
<p>Parrafo 4</p>
</section>

section p[class][id] { background: black; color: white; padding: 10px; }

Finalizando la clase

Como habéis visto, no es para nada difícil aprender a usar el selector de atributo básico en CSS3. Es otra opción para seleccionar elementos y posteriormente aplicarle estilos. Como habéis podido comprobar, os he puesto cinco ejercicios a modo de ejemplo. Mi recomendación es que copiéis los códigos en vuestro editor de texto y los hagáis. De esta forma, vais a afianzar los conocimientos recién adquiridos. Nos tenemos que poner las pilas porque vamos a seguir viendo selectores y tarde o temprano seguro que os hace falta usar alguno de ellos en uno de vuestros proyectos. Repasa la clase anterior donde estudiamos los selectores combinadores hermano adyacente y hermano general.

Coméntame que te ha parecido esta clase y que te está pareciendo el curso de CSS3 desde cero. Me interesa muchísimo tu opinión al respecto, me gustaría saber en que puedo mejorar o si tienes una opinión negativa. Mientras las criticas sean constructivas y respetuosas, bienvenidas sean. Si tienes alguna duda deja un comentario e intentaré ayudarte lo antes posible.

Por favor, comparte esta publicación en redes sociales. De esta manera me ayudas a que este proyecto crezca y llegue a más personas.

¡HASTA LA PRÓXIMA CLASE!