Cómo usar el selector de ID en CSS

Abril 27, 2024

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 (Abril 2024).

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

Revisión de alojamiento ASP - NPSIS.com

Abril 2024

Comenzamos a usar NPSIS.com el 2 de febrero, cuando nuestro host anterior, CIWebHost.com, tuvo numerosos problemas de tiempo de inactividad. NPSIS fue un poco más dinero - $ 39.99 / mes - pero...

ordenadores

Final Fantasy - Una comparación de juegos

Abril 2024

Una revisión de todos los juegos de Final Fantasy. ¿Cuáles incluyeron Cid? ¿Cuál tenía Biggs y Wedge? ¿Qué hay de chocobos y dirigibles? Una comparación entre juegos de la famosa serie Final Fantasy....