AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Selectores CSS


Next Page >>
HTML images

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.

Ejemplo
<!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>
Note:  Las reglas de estilo dentro del selector * se aplicarán a todos los elementos de un documento.

 

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:

Ejemplo
<!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.

Ejemplo

<!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>

Nota: El valor de un atributo de identificación debe ser único dentro de un documento determinado, lo que significa que no hay dos elementos en su documento HTML que puedan compartir el mismo valor de identificación.

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.

 

Ejemplo

<!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 &lt;p&gt; 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>&nbsp;</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 &lt;p&gt; que tienen el
atributo de clase establecido en p.color_rojo, y no tiene ningún efecto en otros párrafos. </p>
</body>
</html>

Nota: 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.

 



Selectores CSS, tipos de selectores, combinacion de selectores, que son los selectores css, lista, ejercicios
Selectores CSS - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...