De tipo
- Este selector nos permite tomar cualquier etiqueta HTML usando su mismo nombre.
- Pero recuerda que en tu HTML puede haber varias etiquetas con el mismo nombre! Así que este selector agarrará TODAS las etiquetas que coincidan con el mismo nombre.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: black;
color: beige;
}
</style>
</head>
<body>
<header>
<div>
<p>Hola Enfermera</p>
</div>
</header>
</body>
</html>
De clase
- Una clase básicamente es un atributo más dentro de tu HTML, por ejemplo, yo puedo tener este div:..
- Entonces, mediante este selector, yo puedo agarrar a todas las etiquetas que tengan la clase “de-clase”.
- Para llamarlo utilizamos hashtag #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.de_clase {
background-color: blueviolet;
color: black;
}
</style>
</head>
<body>
<header>
<div class="de_clase">
<p>segundo parrafo</p>
</div>
</header>
</body>
</html>
De ID
- Como su nombre lo dice, este es un selector que selecciona cualquier elemento a través de su id.
- Al igual que con las clases, podemos poner un id a nuestros elementos, pero a diferencia de las clases NO debemos poner el mismo id en dos o más elementos...
- Entonces, yo puedo simplemente agarrar cualquier elemento por medio de su id:.
- Para llamarlo utilizamos hashtag #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ide {
background-color: aqua;
color: black;
}
</style>
</head>
<body>
<header>
<div id="ide">tercer parrafo</div>
</header>
</body>
</html>
De atributo
- Básicamente, al igual que con las clases, podemos seleccionar varios elementos, pero ahora filtrándolos por su atributo
href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a [href= "<https://developer.mozilla.org/es/docs/Web/CSS/Attribute_selectors>"]{
background-color: brown;
color: antiquewhite;
}
</style>
</head>
<body>
<header>
<div id="ide">
<a href="<https://developer.mozilla.org/es/docs/Web/CSS/Attribute_selectors>">tercer parrafo</a>
</div>
</header>
</body>
</html>
Universal