Cómo usar las clases de estilo y los IDs para el estilo selectivo en CSS

Cómo usar las clases de estilo y los IDs para el estilo selectivo en CSS

Cómo usar las clases de estilo y los IDs para el estilo selectivo en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Construir sitios web en la Web de hoy en día requiere un profundo conocimiento de CSS (Cascading Style Sheets). Estas son las instrucciones que usted da a un sitio web para determinar cómo será su diseño en la ventana del navegador. Usted aplica una serie de «estilos» a su documento HTML que creará el aspecto de su página web.

Hay muchas maneras de aplicar los estilos mencionados anteriormente a lo largo de un documento, pero a menudo se desea utilizar un estilo sólo en algunos de los elementos de un documento, pero no en todas las instancias de ese elemento. También es posible que desee crear un estilo que pueda aplicar a varios elementos de un documento, sin tener que repetir la regla de estilo para cada instancia individual. Para lograr estos estilos deseados, se utilizarán los atributos HTML de la clase y del ID. Estos atributos son atributos globales que se pueden aplicar a casi todas las etiquetas HTML. Esto significa que si está diseñando divisiones, párrafos, enlaces, listas o cualquiera de las otras piezas de HTML en su documento, puede recurrir a atributos de clase e ID para ayudarle a realizar esta tarea.

Selectores de clase

El selector de clase le permite establecer múltiples estilos para el mismo elemento o etiqueta en un documento. Por ejemplo, es posible que desee que ciertas secciones del texto se muestren en un color diferente al resto del texto del documento. Estas secciones resaltadas podrían ser una «alerta» que usted está configurando en la página. Puede asignar sus párrafos con clases como ésta:

 p { color: #0000ff; }
p.alert { color: #ff0000; }

Estos estilos establecerían el color de todos los párrafos en azul (#0000ff), pero cualquier párrafo con un atributo de clase «alert» lo haría con un estilo en rojo (#ff0000). Esto se debe a que el atributo class tiene una especificidad mayor que la primera regla CSS, que sólo utiliza un selector de etiquetas. Cuando se trabaja con CSS, una regla más específica anulará otra menos específica. Así que en este ejemplo, la regla más general establece el color de todos los párrafos, pero la segunda regla, más específica, anula esa configuración sólo en algunos párrafos.

Cómo se puede usar esto en algunas marcas de revisión HTML:


Este párrafo se mostraría en azul, que es el valor por defecto para la página. / i> de laEste párrafo también estaría en azul. / i>
Y este párrafo se mostraría en rojo ya que el atributo class sobrescribiría el color azul estándar del elemento selector styling. / i> / i>.

En ese ejemplo, el estilo "p.alert" sólo se aplicaría a los elementos de párrafo que utilizan esa clase "alert". Si desea usar esa clase a través de múltiples elementos HTML, simplemente elimine el elemento HTML desde el principio de la llamada de estilo (sólo asegúrese de dejar el punto (

.

) en su lugar), así: .alert {color de fondo: #ff0000;}

Esta clase está ahora disponible para cualquier elemento que la necesite. Cualquier parte de su HTML que tenga un valor de atributo de clase «alert» obtendrá ahora este estilo. En el HTML de abajo, tenemos un párrafo y un encabezado de nivel 2 que utilizan la clase «alert». Ambos tendrían un color de fondo rojo basado en el CSS que acabamos de mostrar.


Este párrafo estaría escrito en rojo. / i> En los sitios web actuales, los atributos de clase se utilizan a menudo en la mayoría de los elementos porque es más fácil trabajar con ellos desde una perspectiva de especificidad como lo son los IDs. Encontrará las páginas HTML más actuales para rellenar con atributos de clase, algunos de los cuales se repiten varias veces en un documento y otros que pueden aparecer sólo una vez.

Selectores de ID

El selector ID le permite dar un nombre a un estilo específico sin asociarlo con una etiqueta u otro elemento HTML. Supongamos que tiene una división en su marcado HTML que contiene información sobre un evento. Puede darle a esta división un atributo ID de "evento", y luego, si desea delinear esa división con un borde negro de 1 píxel de ancho, escriba un código ID como este:

#event { border: 1px sólido #000; }

El reto con los selectores de ID es que no se pueden repetir en un documento HTML. Deben ser únicos (puede utilizar el mismo ID en varias páginas de su sitio, pero sólo una vez en cada documento HTML individual). Así que si tuvieras 3 eventos que necesiten este borde, necesitarías darles atributos ID de «event1», «event2» y «event3» y darle estilo a cada uno de ellos. Por lo tanto, sería mucho más fácil usar el atributo de clase de «evento» mencionado anteriormente y darle estilo a todos a la vez.

Complicaciones de los atributos de identificación

Otro reto con los atributos ID es que tienen una especificidad mayor que los atributos de clase. Esto significa que si necesita tener CSS que anula un estilo previamente establecido, puede ser difícil hacerlo si ha confiado demasiado en los IDs. Es por esta razón que muchos desarrolladores web se han alejado de usar IDs en sus marcas, incluso si sólo pretenden usar ese valor una vez, y en su lugar han recurrido a los atributos de clase menos específicos para casi todos los estilos.

La única área en la que los atributos ID entran en juego es cuando se desea crear una página que tenga enlaces de anclaje dentro de la página. Por ejemplo, si tiene un sitio web de estilo paralaje que contiene todo el contenido en una sola página con enlaces que «saltan» a varias partes de esa página. Esto se hace utilizando atributos ID y enlaces de texto que utilizan estos enlaces de anclaje. Simplemente añadiría el valor de ese atributo, precedido por el símbolo «#», al atributo «href» del enlace, así:

Este es el link

Cuando se hace clic o se toca, este enlace salta a la parte de la página que tiene este atributo ID. Si ningún elemento de la página utiliza este valor de ID, el enlace no hará nada.

Recuerde, si desea crear un enlace dentro de la página en un sitio, se requerirá el uso de atributos de ID, pero aún así puede recurrir a las clases con fines de estilo CSS general. Así es como marcamos las páginas hoy en día – usamos selectores de clase tanto como nos es posible y sólo recurrimos a los IDs cuando necesitamos el atributo para actuar no sólo como un gancho para CSS sino también como un enlace dentro de la página.

TAMBIÉN TE INTERESA

fábrica de Mercedes-Benz en Vitoria

Así está aplicando Mercedes-Benz la computación cuántica…

La computación cuántica es tan disruptiva que permite poner el nombre de clásica a la inteligencia artificial. Es el futuro y, seguramente, todas las industrias harán uso de la misma cuando se democratice. Para eso quedan unos años, pero los inicios ya se están dejando sentir en algunas actividades y compañías. En concreto, la automoción

influencer marketing

Influencer Marketing: esto es lo que buscan las marcas en sus embajadores para 2025

El Influencer Marketing ha evolucionado rápidamente en los últimos años. Tanto es así que se atisban grandes cambios para el medio plazo en este profesión nacida en las redes sociales. Así se evidencia en el informe sobre Tendencias en Influencer Marketing para 2025 de Kolsquare, plataforma líder en inteligencia de marketing de influencers. Los que

como hacer SEO en TikTok

No todo es Google: cómo hacer un buen SEO en TikTok

En este post vamos a tratar el tema del SEO en TikTok, ya que la manera en que las personas buscan información y descubren productos en internet ha cambiado radicalmente en los últimos años. Con el crecimiento de plataformas sociales como Instagram y TikTok, un número significativo de usuarios, especialmente de la Generación Z, ha

SK SCORPION

SK SCORPION: la silla gaming que deja pasmado a todo el mundo

Hay muchas sillas gaming pero tenemos que claro que no hay ninguna como la SK SCORPION de la empresa californiana Cluvens. Su nombre lo dice todo aunque se necesita verlo para creerlo. Les presentamos a la silla gaming escorpión, una locura del ingenio que seguro nos lleva a otra dimensión a quienes nos gustan los

tablet resistente TOUGHBOOK G2mk3

Panasonic lanza su primera tablet resistente con capacidades de IA

Todo aquel que esté buscando una tablet resistente es porque su valor añadido con respecto a otros dispositivos radica en su dureza y fiabilidad ante condiciones extremas. Lo mismo ocurre con los móviles de este segmento. El uso que se le va a dar a estos gadgets será en entornos y climatologías exigentes. No obstante,