Selectores CSS
CSS Tutorial » Selectores CSS
Un selector de CSS selecciona los elementos HTML a los que desea aplicar estilo.
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML que desea aplicar estilo.
Podemos dividir los selectores de CSS en cinco categorías:
Selector universal denotado por un asterisco (*), coincide con todos los elementos de la página
Selectores simples (seleccione elementos basados en nombre, identificación, clase)
Selectores de combinador (seleccione elementos en función de una relación específica entre ellos)
Selectores de pseudo-clase (seleccione elementos basados en un cierto estado)
Selectores de pseudo-elementos (seleccionar y aplicar estilo a una parte de un elemento)
Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
Selector universal
El selector universal puede omitirse si existen otras condiciones en el elemento. Este selector se utiliza a menudo para eliminar los márgenes y rellenos predeterminados de los elementos para realizar pruebas rápidas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ejemplo de selector universal CSS</title>
<style>
* {
font-family: "Comic Sans MS", cursive;
color: #39C;
}
</style>
</head>
<body>
<h1>Este es un titulo.</h1>
<p>Este es un párrafo.</p>
</body>
</html>
Selectores de tipo de elemento
Un selector de tipo de elemento hace coincidir todas las instancias del elemento en el documento con el nombre del tipo de elemento correspondiente.
Probemos un ejemplo para ver cómo funciona realmente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Example of CSS element type selector</title>
<style>
h1 {
color: red;
font-size: 24px;
font-family: "Comic Sans MS", cursive;
}
p {
color: #3375FF;
font-weight: bold;
font-size: 18px;
font-family: "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Selectores de identificación
El selector de id se utiliza para definir reglas de estilo para un elemento único o único.
El selector de id se define con un signo de almohadilla (#) seguido inmediatamente por el valor de id.
<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
text-align: center;
color: red;
font-size: 18px;
font-weight: bold;
}
#element2 {
color: #06F;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
}
</style>
</head>
<body><p id="element1">¡Hola Mundo!</p>
<p id="element2">¡Hola España!</p>
<p>Este párrafo no se ve afectado por el estilo.</p></body>
</html>
Selectores de clases
Los selectores de clase se pueden utilizar para seleccionar cualquier elemento HTML que tenga un atributo de clase. Todos los elementos que tengan esa clase serán formateados de acuerdo con la regla definida.
El selector de clase se define con un signo de punto (.) Seguido inmediatamente por el valor de la clase.
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset = "utf-8">
<title> Ejemplo de selector de clases CSS </title>
<style>
.color_azul {
color: #06C;
}
/* Las reglas de estilo anteriores muestran el texto en azul
de cada elemento del documento que tiene el atributo de
clase establecido en .color_azul*/
p.color_rojo {
font-weight: bold;
color: #F00;
}
/*La regla de estilo dentro del selector p.color_rojo muestra el texto
en rojo solo de aquellos elementos <p> que tienen el atributo
de clase establecido en p.color_rojo, y no tiene ningún efecto en otros párrafos.*/
</style>
</head>
<cuerpo><h1 class ="color_azul"> Este es un titulo </h1>
<p class ="color_azul"> Este es un párrafo. </p>
<p> Las reglas de estilo anteriores muestran el texto en azul de
cada elemento del documento que tiene el atributo de clase establecido en azul. </p>
<p> </p>
<p>***************************************</p>
<h1 class ="color_rojo"> Este es segundo titulo </h1>
<p class ="color_rojo"> Este es un párrafo. </p>
<p> La regla de estilo dentro del selector p.color_rojo muestra el
texto en rojo solo de aquellos elementos <p> que tienen el
atributo de clase establecido en p.color_rojo, y no tiene ningún efecto en otros párrafos. </p>
</body>
</html>
Selectores CSS, tipos de selectores, combinacion de selectores, que son los selectores css, lista, ejercicios
Selectores CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.