{"id":14774,"date":"2020-10-12T16:36:01","date_gmt":"2020-10-12T23:36:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14774"},"modified":"2023-12-01T04:01:28","modified_gmt":"2023-12-01T12:01:28","slug":"css-class-vs-id-2","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/","title":{"rendered":"ID vs Class CSS: Understanding the Differences"},"content":{"rendered":"\n<p>When comparing CSS class vs ID, the difference is that CSS class applies a style to multiple elements. ID, on the other hand, applies a style to one unique element. ID is also special in that you can use a special URL to link directly to an element and it\u2019s used by JavaScript. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>In <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">CSS<\/a>, selectors are used to target a specific element or range of elements on a web page. Once an element has been targeted, a style or set of styles can be applied to the element. <\/p>\n\n\n\n<p>There is a wide range of selectors available. Two of the most commonly used are  <code>class<\/code> and <code>ID<\/code>. Both are used to target elements to which a style should be applied. <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-69d34ef20ef0b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d34ef20ef0b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#css-class-vs-id-selectors\" >CSS Class vs ID Selectors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#css-selectors\" >CSS Selectors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#the-id-selector-is-unique\" >The ID Selector is Unique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#the-class-selector-is-not-unique\" >The Class Selector is Not Unique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#ids-have-a-unique-browser-function\" >IDs Have a Unique Browser Function<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#ids-are-used-by-javascript\" >IDs Are Used by JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#you-can-use-both-id-and-css-class-selectors\" >You Can Use Both ID and CSS Class Selectors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-class-vs-id-selectors\"><\/span>CSS Class vs ID Selectors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>What is the difference between the <code>class<\/code> and <code>ID<\/code> selectors? This is a question asked by many developers who are new to CSS, and one that we are going to answer in this guide.&nbsp;<\/p>\n\n\n\n<p>By the end of reading this guide, you\u2019ll know the differences between these two selectors. You&#8217;ll have the information you need to make an informed decision about which selector to use in your code. Let\u2019s get started. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-selectors\"><\/span>CSS Selectors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When <a href=\"https:\/\/careerkarma.com\/blog\/web-design\/\">designing a web page<\/a>, you will want certain styles to apply to specific elements on the page. For instance, you may want to set the text color of all &lt;p&gt; tags to green or change the font size of a header. <\/p>\n\n\n\n<p>Selectors allow you to target specific elements on a web page that you can apply styles to. In CSS, there are many selectors available, such as universal selectors, descendant selectors, child selectors, and grouping selectors. If you\u2019re interested in learning more about CSS selectors, read our beginner\u2019s guide to <a href=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\">CSS selectors<\/a>.  <\/p>\n\n\n\n<p>Two selectors, <code>class<\/code> and <code>id<\/code>, are used to apply styles to elements based on the class and ID assigned to an HTML element, respectively. But these selectors are often confused, so let\u2019s explore how each one works.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-id-selector-is-unique\"><\/span>The ID Selector is Unique<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The id selector allows you to define style rules that apply to a <strong>single<\/strong> element on the web page. Each web page can only have one element with a single <a href=\"https:\/\/careerkarma.com\/blog\/html-css-class-id\/\">ID attribute<\/a>. This means the ID selector can never be used to style more than one element. <\/p>\n\n\n\n<p>ID selectors are defined using a hash sign. They are immediately followed by the ID value that you want to apply a set of style rules to. Here is an example of the ID selector in action: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;p id=&quot;betaBanner&quot;&gt;This is a banner.&lt;\/p&gt;\n\n&lt;style&gt;\n\n#betaBanner {\n\tcolor: white;\n\tbackground-color: orange;\n}<\/pre><\/div>\n\n\n\n<p>This style applies to the &lt;p&gt; element in our HTML document with the ID <em>betaBanner<\/em>. The style will set the element\u2019s background color to orange and the color of the text in the element to white. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"the-class-selector-is-not-unique\"><\/span>The Class Selector is Not Unique<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A class selector allows you to define style rules that apply to <strong>any element<\/strong> with a class attribute equal to a certain value. <\/p>\n\n\n\n<p>As we discussed earlier, the ID selector can only be used to style one element. This is because IDs can only be used once on a web page. Classes, on the other hand, can be used across multiple elements. So, if you apply a style using a class selector, any element which shares that class will be subject to the styles you define. <\/p>\n\n\n\n<p>Class selectors are defined using a period, followed by the value of the class that you want to apply a set of styles to. Here\u2019s an example of the class selector in action: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;p class=&quot;orangeBackground&quot;&gt;This is a banner.&lt;\/p&gt;\n&lt;div class=&quot;orangeBackground&quot;&gt;This is a banner.&lt;\/div&gt;\n\n&lt;style&gt;\n\n.orangeBackground {\n\tbackground-color: orange;\n}<\/pre><\/div>\n\n\n\n<p>This style sets the background color of our &lt;p&gt; tag to orange. In addition, the style sets the background color of our &lt;div&gt; tag to orange. This is because both tags share the same class name: orangeBackground. <\/p>\n\n\n\n<p>In addition, a web element can share multiple different classes. So, if we wanted to apply a class called <em>large<\/em> to our above &lt;div&gt; tag, we could do so using this code: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;div class=&quot;orangeBackground large&quot;&gt;This is a banner.&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>In this code, any style rules defined for the <code>orangeBackground<\/code> and <code>large<\/code> classes are applied to our web element. With an ID, on the other hand, we could not replicate this behavior, because each element can only have one ID.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ids-have-a-unique-browser-function\"><\/span>IDs Have a Unique Browser Function<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>So far, we have discussed the fact that IDs can only apply styles to one element. Unlike classes that can apply styles to multiple elements. This is not the only difference between the class and ID selectors. <\/p>\n\n\n\n<p>In the browser, classes have no special function. Their main purpose is to allow you to apply styles to a range of elements on a web page. IDs, on the other hand, can be used by the browser to navigate to a certain part of the web page. <\/p>\n\n\n\n<p>If you assign an element an ID, you can use a special URL to link directly to that element. This behavior works because IDs are unique on a web page. <\/p>\n\n\n\n<p>Suppose we wanted to send over a link to our website that scrolls the user automatically to a header. We could do so using this code: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;h3 id=&quot;section3&quot;&gt;Section Three&lt;\/h3&gt;<\/pre><\/div>\n\n\n\n<p>In this code, we have assigned an ID to the &lt;h3&gt; tag that contains the text <code>Section Three<\/code>. Now, we could send a user a direct link that scrolls them to that element on the web page. This is done by using the following URL:  <\/p>\n\n\n\n<p>https:\/\/domain.com\/index.html#section3 <\/p>\n\n\n\n<p>When a user navigates to this URL, (where <em>domain.com<\/em> is the URL of your website), they&#8217;ll scroll to the heading with the ID <em>section3<\/em>. This behavior does not apply to classes. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ids-are-used-by-javascript\"><\/span>IDs Are Used by JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you have any experience using <a href=\"https:\/\/careerkarma.com\/blog\/javascript-hello-world\/\">JavaScript<\/a>, you\u2019ll know that IDs are commonly used in that programming language. The function getElementById allows you to select an element on a web page. It relies on the fact that only one element can share the same ID. <\/p>\n\n\n\n<p>Classes, on the other hand, can reflect multiple elements on a web page. They would not be useful if you want to work with a particular element in JavaScript. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"you-can-use-both-id-and-css-class-selectors\"><\/span>You Can Use Both ID and CSS Class Selectors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are no rules in HTML that prevent you from assigning an element both an ID and a class.<\/p>\n\n\n\n<p>Suppose you want to apply the styles associated with a class called <code>backgroundOrange<\/code> to a &lt;div&gt; tag. However, you also want to apply a few unique styles to the &lt;div&gt;. You could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class=&quot;backgroundOrange&quot; id=&quot;customDiv&quot;&gt;&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>This &lt;div&gt; tag will be subject to the styles for the class <code>backgroundOrange<\/code>. In addition, it will also use the styles applied to the <code>customDiv<\/code> ID using an ID selector.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you\u2019re working with CSS, there are no specific reasons forcing you to use an ID over a class. However, it is best practice to only use IDs if you want a style to apply to one element on the web page, and to use classes if you want a style to apply to multiple elements.<\/p>\n\n\n\n<p>In this tutorial, we discussed, with reference to examples, the basics of the CSS ID and class selectors, and we compared and contrasted the two. Now you\u2019re ready to start using the CSS ID and class selectors like an expert <a href=\"https:\/\/careerkarma.com\/blog\/web-developer-courses\/\">developer<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"When comparing CSS class vs ID, the difference is that CSS class applies a style to multiple elements. ID, on the other hand, applies a style to one unique element. ID is also special in that you can use a special URL to link directly to an element and it\u2019s used by JavaScript. In CSS,&hellip;","protected":false},"author":240,"featured_media":14777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14774","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>ID vs Class CSS: Understanding the Differences | Career Karma<\/title>\n<meta name=\"description\" content=\"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ID vs Class CSS: Understanding the Differences\" \/>\n<meta property=\"og:description\" content=\"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-12T23:36:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:01:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"ID vs Class CSS: Understanding the Differences\",\"datePublished\":\"2020-10-12T23:36:01+00:00\",\"dateModified\":\"2023-12-01T12:01:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\"},\"wordCount\":1215,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\",\"name\":\"ID vs Class CSS: Understanding the Differences | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg\",\"datePublished\":\"2020-10-12T23:36:01+00:00\",\"dateModified\":\"2023-12-01T12:01:28+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg\",\"width\":1020,\"height\":737},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ID vs Class CSS: Understanding the Differences\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"ID vs Class CSS: Understanding the Differences | Career Karma","description":"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/","og_locale":"en_US","og_type":"article","og_title":"ID vs Class CSS: Understanding the Differences","og_description":"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.","og_url":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-12T23:36:01+00:00","article_modified_time":"2023-12-01T12:01:28+00:00","og_image":[{"width":1020,"height":737,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"ID vs Class CSS: Understanding the Differences","datePublished":"2020-10-12T23:36:01+00:00","dateModified":"2023-12-01T12:01:28+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/"},"wordCount":1215,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/","url":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/","name":"ID vs Class CSS: Understanding the Differences | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg","datePublished":"2020-10-12T23:36:01+00:00","dateModified":"2023-12-01T12:01:28+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The class and id selectors are used to select elements on a web page in CSS. On Career Karma, learn the differences between CSS ID vs class.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/home-office-569359_1920.jpg","width":1020,"height":737},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"ID vs Class CSS: Understanding the Differences"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14774"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14774\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14777"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}