1. Que es un Selector CSS
Los selectores identifican a un elemento dentro de la página Web ó aplicación para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML, hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.
Hasta ahora hemos visto selectores en los que podemos agregar una o varias etiquetas separadas por coma para que nuestros estilos afecten a varios elementos, aunque normalmente nos interesará justo lo contrario, ser más específicos y poder asignar estilos de manera más concreta a elementos específicos.
2. Cascada, Especificidad y Herencia
Cascada
En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que viene en último lugar en el CSS.
En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al título de encabezamiento h1. El título h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.
index.html
Titulo Nivel 1
<h1>Titulo Nivel 1</h1> <!--definimos el elemento en HTML-->style.css
/*Se aplica el color rojo porque fue el ultimo declarado*/
h1 {
color: blue; /*Color de letra azul*/
}
h1 {
color: red; /*Color de letra rojo*/
}Especificidad
La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector.
En el ejemplo siguiente tenemos dos reglas diferente que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar del selector de etiqueta que aparece más abajo en el orden del código.
index.html
Titulo Nivel 1
<h1 class="titulo">Titulo Nivel 1</h1> <!--definimos el elemento en HTML-->style.css
/*Se aplica el color rojo porque es más especifico al tener un selector de clase*/
.titulo {
color: red; /*Color de letra rojo*/
}
h1 {
color: blue; /*Color de letra azul*/
}Herencia
La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.
Por ejemplo, si para el elemento parrafo se establece el color verde, cada elemento que se encuentre dentro de aquel elemento también se mostrará de ese color, a menos que se haya aplicado un color diferentes directamente en este (orange).
index.html
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, nulla?
<!--definimos el elemento en HTML-->
<p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.</p>
<p >Lorem ipsum dolor, sit amet consectetur <span class="text-orange">adipisicing elit.</span> Debitis, nulla?</p>
style.css
/*Todos los elemento p (parrafos) heredan el mismo color, excepto la parte naranja*/
p {
color: green; /*Color de letra verde en el elemento parrafo*/
}
.text-orange {
color: orange; /*Color de letra naranja el elemento donde este la clase text-orange*/
}3. Tipo de Selectores
Veamos los diferentes selectores básicos con más detalle:
Selector Universal
Se utiliza para seleccionar todos los elementos de la página.
El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTMsL.
index.html
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.
<!--definimos el elemento en HTML-->
<p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.</p>style.css
/*Todos los elementos html pierde su margen y relleno por defecto*/
* {
margin: 0;
padding: 0;
}Selector de Etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.
El siguiente ejemplo selecciona todos los párrafos de la página:
index.html
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, nulla?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, earum.
<!--definimos el elemento en HTML-->
<p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.</p>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, nulla?</p>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, earum.</p>
style.css
/*Todos los elemento p (parrafos) heredan el mismo color, excepto la parte naranja*/
p {
color: green; /*Color de letra verde en el elemento parrafo*/
}
Selector de Clase
El selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimos nosotros). y apunta aun elemento HTML que contega la clase, es decir a un elemento HTML que tenga el atributo class. la clase que definamos se puede utilizar mutiples veces en otros elementos HTML.
Observemos el siguiente ejemplo, enlaces CSS para ponerle letras color blanco, relleno de 12px y un fondo de color negro al elemento con la clase="menu".
index.html
<!--definimos el elemento en HTML-->
<nav >
<a >Inicio</a>
<a >Quiens Somos</a>
<a >Servicios</a>
<a class="menu" >Contactenos</a>
<nav >
style.css
/*La clase menu solo afecta al elemento (a) que la tenga asociada*/
.menu {
background-color: #000; /*fondo del elemento color negro*/
color: #fff; /*color de letra blanco*/
padding: 12px; /*relleno del elemento 12px*/
}Selector de Id
El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
Observemos el siguiente ejemplo, parrafo CSS para ponerle letras color blanco, relleno de 12px, texto justificado y un fondo de color naranja al elemento con la id="destacado".
index.html
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, nulla?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, earum.
<!--definimos el elemento en HTML-->
<p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, labore.</p>
<p id="destacado" >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, nulla?</p>
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, earum.</p>style.css
/*Solo un elemento html hereda el selector id #destacado, no se debe repetir*/
#destacado {
background-color: orange; /*Fondo de color naranja*/
color: #fff; /*Color de letra blanca*/
text-align: justify; /*texto justificado*/
padding: 12px; /*Relleno o espaciado interno de 12px*/
}Selectores Descendientes
Los selectores descendientes seleccionan elementos que se encuentran dentro otros elementos mayores, de esta manera se puede colocar un estilo específico a un elemento que se encuentra contenido en otro elemento HTML mayor.
Observemos el siguiente ejemplo, tenemos un elemento strong dentro de un li, elementos li dentro de un ul, y este ul a la vez esta dentro de un div, con clase .seccion y esta seccion dentro div con id #container.
index.html
- Elemento 1
- Elemento 2
- Elemento 3
<!--definimos el elemento en HTML-->
<div id="container" >
<div class="seccion" >
<ul >
<li>Elemento 1</li>
<li><strong>Elemento 2</strong></li>
<li>Elemento 3</li>
</ul>
</div>
</div>style.css
/*Selecciona el elemento strong , hijo que esta dentro de sus padres mayores*/
#container .seccion ul li strong {
background-color: #667eea; /*Fondo de color azul indigo */
color: #fff; /*Color de letra blanca*/
border: 1px solid green; /*border 1 px solido verde*/
padding: 8px; /*Relleno o espaciado interno de 12px*/
}Ejemplo Practico: Empresa Pesquera
Utilizaremos un primer ejercicio para crean una pagina web con las siguientes Caracteristicas:
index.html
Somos la unica empresa pesquera en la región sucreña que tiene la mayor despensa de pescados y mariscos frescos traidos diariamente de golfo de morrosquillo , sub región de la mojana, sub región san jorge, entre muchos más lugares de nuestras región sucreña. Apoyamos principalmente la pesca sucreña, Artesanal y responsable, compramos directamente, no tenemos intermediarios.
En Pesquera Criolla les recordamos lo rica que es la comida de nuestras costas, para que no la olviden, siempre defendiendo nuestros sabores tradicionales, un pescado bien frito, arroz con coco, patacones, cazuela y también tienen la opción de disfrutar preparaciones con Leña, al horno o Wok.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pesquera criolla</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="logo" src="logo_pesquera.svg" alt="Logo Pesquera Criolla" />
<nav >
<a id="menu">Inicio</a>
<a >Nosotros</a>
<a >Recetas</a>
<a >Productos</a>
</nav>
<section >
<img src="https://images.unsplash.com/photo-1576664014410-287450d139fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=497&q=80" alt="galeria">
<img src="https://images.unsplash.com/photo-1564130236985-d1050b19996b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="galeria">
<img src="https://images.unsplash.com/photo-1583873334639-04925e9aec23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=518&q=80" alt="galeria">
</section>
<p>
Somos la unica empresa pesquera en la región sucreña que tiene la mayor despensa de pescados y mariscos frescos traidos diariamente de golfo de morrosquillo , sub región de la mojana, sub región san jorge, entre muchos más lugares de nuestras región sucreña.
Apoyamos principalmente la pesca sucreña, Artesanal y responsable, compramos directamente, no tenemos intermediarios.
</p>
<p>
En <span >Pesquera Criolla</span> les recordamos lo rica que es la comida de nuestras costas, para que no la olviden, siempre defendiendo nuestros sabores tradicionales, un pescado bien frito, arroz con coco, patacones, cazuela y también tienen la opción de disfrutar preparaciones con Leña, al horno o Wok.
</p>
</body>
</html>style.css
/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo de letra roboto*/
body{
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
}
.logo { /*clase logo que aplica ancho y alto de 192px al logo*/
width: 192px; /*ancho*/
height: 192px; /*alto*/
display:block; /*Convierte la imagen el bloque*/
margin:auto; /*Centra el elemento bloque*/
margin-bottom: 12px; /*Margen externo inferior*/
}
#menu { /*id menu que apunta al atributo id declarado en la etiqueta a*/
background-color: #4299e1; /*fondo del elemento color azul*/
color: #fff; /*texto color blanco*/
padding: 8px; /*relleno o espaciado interno*/
}
section img{ /*selector descendente que apunta a las imagenes dentro del section*/
width: 256px;
height: 256px;
margin-top: 12px; /*Margen externo superior*/
}
p{ /*todos los elementos p reciben el mismo estilo */
background-color: #4299e1;
color: #fff;
padding: 16px;
}
p span{ /*selector descendente que apunta al span dentro del elemento p*/
border: 1px solid #fff; /*borde solido blanco*/
border-radius:4px; /*borde de esquinas redondas*/
font-weight: bold; /*texto en negrilla*/
padding: 4px;
}Actividad #3. CSS3: Selectores CSS
Ahora que ya sabes el uso de CSS en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.
Te ha resultado util esta guia de aprendizaje ?
Que tal el contenido?