CodeGym/Cursos/Frontend SELF ES/Principales selectores

Principales selectores

Disponible

4.1 Selectores por tipo

Los selectores en CSS se utilizan para definir los elementos a los que se aplicarán los estilos. Los principales selectores incluyen selectores por tipo, clase, identificador y selectores universales. Cada uno de estos selectores tiene sus propias características y aplicaciones.

Selectores por tipo (Type Selectors)

Los selectores por tipo aplican estilos a todos los elementos de un tipo determinado. Por ejemplo, se pueden aplicar estilos a todos los párrafos (<p>), encabezados (<h1>, <h2> etc.) u otras etiquetas HTML.

tagname {
  propiedad: valor;
  propiedad: valor;
}
CSS
p {
  color: blue;
  font-size: 14px;
}

Este selector aplicará estilos a todos los elementos <p> en el documento.

Características:

  • Se aplica a todos los elementos de un tipo especificado
  • Útil para estilos globales que deben aplicarse a todos los elementos de un tipo determinado

4.2 Selectores por clase

Selectores por clase permiten aplicar estilos a uno o varios elementos que tienen una clase específica. Las clases se definen usando el atributo class en HTML y se denotan con un punto (.) en CSS.

Sintaxis:

.classname {
  propiedad: valor;
  propiedad: valor;
}

Ejemplo:

CSS
.button {
  background-color: green;
  color: white;
  padding: 10px;
}

Este selector aplicará estilos a todos los elementos que tengan la clase button.

Características:

  • Puedes usar la misma clase para varios elementos
  • Permite aplicar estilos iguales fácilmente a diferentes elementos

4.3 Selectores por identificador

Los selectores por identificador aplican estilos a un elemento con una identificación única. Las identificaciones se definen con el atributo id en HTML y se denotan con el símbolo de almohadilla (#) en CSS.

Sintaxis:

#uniq-id {
  propiedad: valor;
  propiedad: valor;
}

Ejemplo:

Este selector aplicará estilos al elemento con el identificador main.

CSS
/* Selecciona el elemento con el identificador #main */
#main {
  width: 800px;
  background: yellow;
}
HTML
<div id="main">Este elemento tendrá un ancho de 800px.</div>
<div>Este elemento no será estilizado.</div>

Características:

  • La identificación debe ser única en la página
  • Se utiliza para estilizar elementos únicos, como un encabezado o el contenido principal

4.4 Selectores agrupados

Los selectores agrupados permiten aplicar la misma regla a varios elementos. Reducen la cantidad de código y facilitan la gestión de estilos.

Sintaxis:

selector, selector, … {
  propiedad: valor;
  propiedad: valor;
}

Ejemplo:

CSS
/* Selecciona todos los elementos h1, h2 y h3 */
h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}
HTML
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<p>Este texto no será estilizado por esta regla.</p>

4.5 Selectores universales

Los selectores universales aplican estilos a todos los elementos en la página. Se denotan con un asterisco (*) y pueden ser útiles para restablecer estilos o para aplicar estilos comunes a todos los elementos.

Sintaxis:

* {
  propiedad: valor;
  propiedad: valor;
}

Ejemplo:

Este selector aplicará estilos a todos los elementos en la página, restableciendo sus márgenes y estableciendo el modelo de caja.

HTML
<div>Párrafo 1</div>
<div>Párrafo 2</div>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Características:

  • Se aplica a todos los elementos en la página
  • Útil para restablecimientos globales de estilo o para aplicar estilos básicos a todos los elementos
1
Tarea
Frontend SELF ES,  nivel 12lección 4
Bloqueada
Selectores de clases
Selectores de clases
1
Tarea
Frontend SELF ES,  nivel 12lección 4
Bloqueada
Selectores de ID
Selectores de ID
Comentarios
  • Populares
  • Nuevas
  • Antiguas
Debes iniciar sesión para dejar un comentario
Esta página aún no tiene comentarios