Meta tags:
description=Aprende a usar el selector CSS ID para identificar un elemento HTML único y el selector class para aplicar estilos a varios elementos. Ver ejemplos.;

Headings (most frequently used words):

id, class, selector, css, un, ejemplo, de, la, diferencia, entre, práctica, varias, clases, en, mismo, elemento, cuál, debo, usar,

Text of the page (most frequently used words):
css (44), border (34), class (29), color (25), text (23), html (22), font (21), style (20), grid (18), #selector (16), que (16), aprender (15), elemento (14), width (14), los (13), para (13), una (13), background (13), column (13), blue (11), elementos (10), con (10), por (10), clases (10), break (10), página (9), único (9), estilo (9), title (9), top (9), right (9), left (9), bottom (9), image (9), animation (9), the (8), position (8), stroke (8), puede (7), las (7), mismo (7), head (7), overflow (7), decoration (7), offset (7), flex (7), page (6), del (6), selectores (6), body (6), paragraph (6), párrafo (6), 1c87c9 (6), align (6), padding (6), margin (6), type (6), variant (6), w3docs (5), práctica (5), javascript (5), aplica (5), solo (5), regla (5), size (5), ejemplo (5), nombre (5), first (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), editor (4), diferencia (4), entre (4), this (4), varias (4), dar (4), estilos (4), clase (4), cada (4), varios (4), ver (4), mode (4), transform (4), fill (4), height (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), json (3), code (3), encoder (3), cuestionarios (3), ejercicios (3), php (3), mientras (3), usarse (3), veces (3), misma (3), vez (3), cuál (3), son (3), cuando (3), ids (3), muchas (3), tener (3), copiar (3), document (3), doctype (3), atributo (3), tanto (3), como (3), segundo (3), sobre (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), auto (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), todos (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), ejemplos (2), fragmentos (2), web (2), texto (2), sintaxis (2), comprobar (2), define (2), pueden (2), debe (2), principal (2), mantienen (2), especificidad (2), enlaces (2), usar (2), más (2), peso (2), ese (2), razón (2), uso (2), símbolo (2), muchos (2), debería (2), contener (2), únicamente (2), highlight (2), espacios (2), aquí (2), dos (2), encabezado (2), sola (2), pruébalo (2), third (2), second (2), escribe (2), seguido (2), hojas (2), internas (2), externas (2), apunta (2), cuyo (2), indicado (2), valor (2), dentro (2), coincide (2), capítulo (2), qué (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, desde, 2014, next, previous, yes, was, helpful, reutilizables, fáciles, sobreescribir, baja, predecible, recurre, realmente, necesites, identificador, fragmento, asociaciones, formularios, getelementbyid, for, label, usa, debo, también, tienen, cascada, apuntan, gana, independientemente, orden, fuentes, consulta, extra, guías, prefieren, reservan, internos, puntos, acceso, href, seccion, través, repetidos, componentes, cabecera, destino, ancla, típico, ilimitadas, reutilizable, aparecer, determinado, reutilizar, produce, inválido, romper, scripts, funciones, accesibilidad, esperan, sean, únicos, distinción, fundamental, unicidad, esta, composibilidad, motor, pequeñas, propósito, combinar, mezclar, toda, both, larger, and, highlighted, ffe69e, tiempo, lístalас, separadas, aplicará, coincida, distintos, estiliza, tercer, vuelven, medio, tiene, afectado, definir, reutilizarla, exactamente, sirven, some, heading, punto, contiene, úsalo, compartido, avisos, reutilizado, botones, btn, warning, deba, aplicarse, convención, comenzar, dígito, abre, asignamos, declaramos, propiedad, sección, vuelve, azul, primero, tercero, predeterminado, almohadilla, dado, ser, está, pensado, grupo, ellos, específico, este, explica, hace, cómo, escribirlo, diferencian, igual, importante, cuándo, elegir, uno, otro, anterior, aprendimos, ahora, hablaremos, basados, atributos, recurrirás, frecuencia, aprende, identificar, aplicar, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, property, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectors, propiedades, css3, guía, flexbox, guides, gradientes, nombres, colores, tablas, links, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
selectores css id y class w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom css id y class aprende a usar el selector css id para identificar un elemento html único y el selector class para aplicar estilos a varios elementos ver ejemplos en el capítulo anterior aprendimos sobre los selectores ahora hablaremos sobre los selectores id y class que son los dos selectores basados en atributos a los que recurrirás con más frecuencia al dar estilo a una página web este capítulo explica qué hace cada selector cómo escribirlo en qué se diferencian y igual de importante cuándo elegir uno sobre el otro selector css id un selector id apunta al único elemento html cuyo atributo id coincide con el nombre indicado dado que un id debe ser único dentro de una página el selector id está pensado para dar estilo a un elemento específico no a un grupo de ellos tanto en las hojas de estilo internas como externas el selector id se escribe con un símbolo de almohadilla seguido del valor del id nombre ejemplo de un selector id selector css id para un elemento html doctype html html head title title of the document title style blue color 1c87c9 style head body p the first paragraph p p id blue the second paragraph p p the third paragraph p body html copiar pruébalo tú mismo aquí le asignamos al segundo párrafo el id blue id blue y declaramos su estilo con la propiedad color blue color 1c87c9 dentro de la sección head solo ese elemento coincide por lo que únicamente el segundo párrafo se vuelve azul el primero y el tercero mantienen su color predeterminado un valor de id no puede contener espacios y por convención no debería comenzar con un dígito abre el ejemplo en el editor para comprobar que solo el segundo párrafo es 1c87c9 selector css class un selector class apunta a todos los elementos cuyo atributo class contiene el nombre indicado úsalo cuando el mismo estilo deba aplicarse a varios elementos por ejemplo un estilo warning compartido por varios avisos o un estilo btn reutilizado en muchos botones tanto en las hojas de estilo internas como externas el selector class se escribe con un punto seguido del nombre de la clase nombre ejemplo de un selector class ejemplo de selector css class doctype html html head title title of the document title style blue color 1c87c9 style head body h2 class blue this is some heading h2 p the second paragraph p p class blue the third paragraph p body html copiar pruébalo tú mismo aquí la misma clase blue se aplica a dos elementos distintos un encabezado y un párrafo class blue y se estiliza una sola vez con blue color 1c87c9 tanto el encabezado como el tercer párrafo se vuelven 1c87c9 mientras que el párrafo del medio que no tiene clase no se ve afectado definir la regla una sola vez y reutilizarla es exactamente para lo que sirven las clases varias clases en un mismo elemento un elemento puede tener varias clases al mismo tiempo lístalас en el atributo class separadas por espacios y se aplicará cada regla que coincida doctype html html head title title of the document title style text font size 20 px highlight background color ffe69e style head body p class text highlight this paragraph is both larger and highlighted p body html copiar esta composibilidad es la razón por la que las clases son el motor de css clases pequeñas y de propósito único se pueden combinar y mezclar en toda la página la diferencia entre id y class la distinción fundamental es la unicidad un id es único cada elemento solo puede tener un id y cada página debería contener únicamente un elemento con un id determinado reutilizar el mismo id en varios elementos produce html inválido y puede romper scripts y funciones de accesibilidad que esperan que los ids sean únicos una class es reutilizable la misma clase puede aparecer en muchos elementos y un único elemento puede tener muchas clases id class símbolo en css veces por página una ilimitadas por elemento un id muchas clases uso típico un elemento único p ej la cabecera de página un destino de ancla estilos repetidos componentes los ids también tienen más peso en la cascada que las clases cuando una regla de id y una regla de class apuntan al mismo elemento la regla del id gana independientemente del orden de las fuentes consulta la especificidad css a través de los selectores ese peso extra es una razón por la que muchas guías de estilo prefieren las clases para dar estilos y reservan los ids para enlaces internos de página href seccion y puntos de acceso de javascript cuál debo usar en la práctica usa clases para dar estilos son reutilizables fáciles de sobreescribir y mantienen la especificidad baja y predecible recurre a un id solo cuando realmente necesites un identificador único para un elemento para enlaces de fragmento asociaciones label for en formularios o getelementbyid en javascript práctica práctica cuál es la diferencia principal entre un id css y una class cuál es la diferencia principal entre un id css y una class el id css es único y solo debe usarse una vez por página mientras que la class puede usarse varias veces el id css y la class pueden usarse varias veces en una misma página la class se aplica a elementos html y el id se aplica a elementos css el id css se define con mientras que la class se define con el id css se aplica a elementos css y la class se aplica a elementos html comprobar was this page helpful yes no previous sintaxis css next texto en css on this page selector css id selector css class la diferencia entre id y class práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores