Cómo usar el selector de ID en CSS

Diciembre 6, 2023

En los últimos tutoriales, discutimos dos de los tres tipos de reglas CSS. El primer tipo es el selector HTML que se basa y controla el estilo de la etiqueta HTML correspondiente. El segundo tipo es el selector de clase que funciona como un estilo genérico que se puede aplicar a cualquier elemento en la página web.

Ahora es el momento de discutir el tercer tipo de regla CSS que se llama selector de ID. Al igual que con el selector de clase, el selector de ID se puede aplicar a cualquier elemento en la página web. Sin embargo, está destinado a usarse solo una vez en una página. Esto hace que el selector de ID sea muy útil para HTML dinámico y JavaScript. Teóricamente, si usa el selector de ID más de una vez en una página, el navegador web debe ignorar los siguientes. Sin embargo, este no es siempre el caso. Es muy difícil confiar en la previsibilidad de los navegadores web. Por lo tanto, cuando elige usar el selector de ID, tenga cuidado de usarlo solo una vez. Veamos un ejemplo.

Código basico

. . .

Ejemplo

. . .

Selector de ID

Dentro de las etiquetas, notará que el selector de ID comienza con el símbolo hash (#) y que se sigue con el nombre que asigna al selector de ID. Al igual que con el selector de clase, puede usar cualquier nombre que desee, pero es mejor si el nombre indica para qué se usará el selector de ID. En el ejemplo, lo estamos utilizando para identificar una sección especial de texto.

{El valor de la propiedad;}

También dentro de las etiquetas, el selector de ID es seguido por uno o más pares de propiedades y valores que se colocan entre llaves. Estos pares de propiedad-valor establecen las características del estilo. En el ejemplo, el párrafo con el selector de ID de texto especial tendrá texto en color rojo.

. . .

Cuando use el selector de ID en el cuerpo de la página web, usará el atributo id dentro de la etiqueta HTML de apertura. El valor para el atributo id es el nombre único dado al selector de ID, en este caso "texto_especial". (id = "value") Así es como el selector "conecta" el estilo con esa etiqueta HTML a la que desea aplicar el estilo. En el ejemplo anterior, el selector de ID se colocará dentro de solo uno

etiqueta en la página web. Cualquier otra etiqueta HTML en la página web no debe contener el selector de ID dentro de la etiqueta de apertura.

Instrucciones De Vídeo: Selectores de ID y de CLASE en CSS (Diciembre 2023).

Cómo usar el selector de ID en CSS, HTML, tipos de reglas CSS, cómo usar el selector de ID, el selector de ID de CSS

Artículo Anterior

Artículo Siguiente

Uso de los comandos del portapapeles de Word 2007

Diciembre 2023

Hay muchas personas que usan Word. Pero, ¿cuántas personas realmente saben cómo usar todas las funciones que Word tiene para ofrecer? Incluso si usted es un usuario experimentado del software de...

ordenadores

Ordenar un conjunto de prácticas de lista (MS Word)

Diciembre 2023

Pruebe un conjunto de práctica para ver cómo funciona la clasificación de una lista simple en un documento de Word. En un documento de Word en blanco, ingrese en la lista de nombres que se muestra a...