Selectores de ID

Lección 5 de 15 del curso Selectores CSS de Coddy.

Un selector de ID es un tipo de selector CSS que selecciona elementos que tienen un atributo ID específico. El atributo ID es un atributo personalizado que puedes añadir a los elementos HTML para identificarlos de forma única.

Para seleccionar elementos con un ID específico, se utiliza el símbolo de almohadilla (#) seguido del valor del ID. Por ejemplo, el selector #my-id selecciona el elemento con el ID my-id.

Aquí tienes un ejemplo de cómo utilizar un selector de ID para dar estilo a una página web:

#my-id {
  color: red;
  font-size: 2em;
}

Para añadir un id a un elemento escribe:

<div id="my-id"></div>

Al igual que los selectores de clase, esta regla CSS aplicará estilo al elemento con el ID my-id para que sea rojo y tenga un tamaño de fuente de 2em.

Desafío

Fácil

Aquí tienes un ejercicio para poner a prueba tu comprensión de los selectores de ID:

Crea una página web con dos elementos div.
Asigna al primer elemento div el ID my-id.
Utiliza un selector de ID para aplicar estilo al elemento div con el ID my-id para que tenga cualquier color que no sea negro y un tamaño de fuente de 30px.

Pruébalo tú mismo

<html>
<head>
  <title>ID Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
    
</body>
</html>

Todas las lecciones de Selectores CSS

1Introducción a los selectores CSS

Propósito de los selectores CSS ¿Por qué son importantes?

4Selectores de atributos

Introducción a los selectores de atributos Presencia y valores exactos Selectores de valor de atributo Selectores de valor de atributo II Selectores de valor de atributo III

2Selectores simples

Selectores de tipo Selectores de claseSelectores de IDSelectores universales

3Selectores combinadores

Selector de hijo Selector de descendiente Selector de hermano adyacente Selector de hermano general