{"id":14164,"date":"2011-09-06T19:53:07","date_gmt":"2011-09-07T02:53:07","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14164"},"modified":"2021-06-29T09:23:08","modified_gmt":"2021-06-29T16:23:08","slug":"class","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/class\/","title":{"rendered":"Class"},"content":{"rendered":"\n<p>A class selector in CSS starts with a dot (.), like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.class {\n\n}<\/code><\/pre>\n\n\n\n<p>A class selector selects all elements with a matching class attribute.<\/p>\n\n\n\n<p>For example, this element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button class=\"big-button\">Push Me&lt;\/button><\/code><\/pre>\n\n\n\n<p>is selected and styled like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.big-button {\n  font-size: 60px;\n}<\/code><\/pre>\n\n\n\n<p>You can give a class any name that starts with a letter, hyphen (-), or underscore (_). You can use numbers in class names, but a number can&#8217;t be the first character or the second character after a hyphen. Unless you get crazy and start <a href=\"https:\/\/mathiasbynens.be\/notes\/css-escapes\" rel=\"noopener\">escaping selectors<\/a>, which can get weird:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.\\3A \\`\\( { \n  \/* matches elements with class=\":`(\" *\/\n} <\/code><\/pre>\n\n\n\n<p>An element can have more than one class:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p class=\"intro blue\">\n  This paragraph will get styles from .intro and .blue selectors.\n&lt;\/p><\/code><\/pre>\n\n\n\n<p>An element with multiple classes is styled with the CSS rules for each class. You can also combine multiple classes to select elements:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* only selects elements with BOTH of these classes *\/\n.intro.blue {\n    font-size: 1.3em;\n }<\/code><\/pre>\n\n\n\n<p>This demo shows how single-class selectors are different from combined selectors:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d4be6cc9da4b4387d45f7093e11d8b81\" src=\"\/\/codepen.io\/anon\/embed\/d4be6cc9da4b4387d45f7093e11d8b81?height=450&amp;theme-id=1&amp;slug-hash=d4be6cc9da4b4387d45f7093e11d8b81&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d4be6cc9da4b4387d45f7093e11d8b81\" title=\"CodePen Embed d4be6cc9da4b4387d45f7093e11d8b81\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You can also limit a class selector to a specific kind of element, which is sometimes called &#8220;tag qualifying&#8221;:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">ul.menu {\n  list-style: none;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"specificity\">Specificity<\/h3>\n\n\n<p>By itself, a class selector has a specificity value of 0, 0, 1, 0. That&#8217;s &#8220;more powerful&#8221; than an element selector (like: <code>a { }<\/code>) but less powerful than an ID selector (like <code>#header { }<\/code>). Specificity increases when you combine class selectors or limit the selector to a specific element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"accessing-classes-with-javascript\">Accessing Classes with JavaScript<\/h3>\n\n\n<p>You can read and manipulate an element&#8217;s classes with <code>classList<\/code> in JavaScript. For instance, adding a class could be like:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.getElementById('italicize').classList.add('italic'); \n<\/code><\/pre>\n\n\n\n<p>This demo shows basic examples of <code>classList<\/code> in use:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YPqeJO\" src=\"\/\/codepen.io\/anon\/embed\/YPqeJO?height=450&amp;theme-id=1&amp;slug-hash=YPqeJO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YPqeJO\" title=\"CodePen Embed YPqeJO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>jQuery also has methods for interacting with classes, including <code>.addClass()<\/code>, <code>.removeClass()<\/code>, <code>.toggleClass()<\/code>, and <code>.hasClass()<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/selectors\/#class-html\" rel=\"noopener\">Read the W3C specification for class selectors.<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/semantic-class-names\/\">Learn more about semantic class names.<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/specifics-on-css-specificity\/\">Learn more about specificity.<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/818-the-difference-between-id-and-class\/\">Learn about the difference between classes and IDs.<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/multiple-class-id-selectors\/\">Learn about multiple class selectors and class\/ID selector combos.<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element.classList\/\" rel=\"noopener\">Learn about the .classList API.<\/a><\/li><li><a href=\"http:\/\/api.jquery.com\/category\/manipulation\/class-attribute\/\" rel=\"noopener\">Learn about class manipulation in jQuery.<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>Any<\/td><td>Any<\/td><td>Any<\/td><td>Any<\/td><td>Any<\/td><td>Any<\/td><td>Any<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A class selector in CSS starts with a dot (.), like this: A class selector selects all elements with a matching class attribute. For example, this element: is selected and styled like this: You can give a class any name that starts with a letter, hyphen (-), or underscore (_). You can use numbers in [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14160,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":196824,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-to-qualify-a-selector\/","url_meta":{"origin":14164,"position":0},"title":"Mixin to Qualify a Selector","date":"February 26, 2015","format":false,"excerpt":"There is no easy way of qualifying a selector from within its associated ruleset. By qualifying I mean prepending an element name (e.g. a) to a class (e.g. .btn) so that a ruleset gets specific to a combination of an element selector and a class selector (e.g. a.btn) for instance.\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14164,"position":1},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14267,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/required\/","url_meta":{"origin":14164,"position":2},"title":":required","date":"September 6, 2011","format":false,"excerpt":"The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":14164,"position":3},"title":":not","date":"September 6, 2011","format":false,"excerpt":"The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors. The ability to use a\u2026","rel":"","context":"In \":not\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/not-slide.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14265,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/root\/","url_meta":{"origin":14164,"position":4},"title":":root","date":"September 6, 2011","format":false,"excerpt":"The :root selector allows you to target the highest-level \"parent\" element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. In the overwhelming\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336866,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/w\/where\/","url_meta":{"origin":14164,"position":5},"title":":where","date":"March 23, 2021","format":false,"excerpt":"The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero\u2026","rel":"","context":"In \":where\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14164"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14164"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14164\/revisions"}],"predecessor-version":[{"id":343498,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14164\/revisions\/343498"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14160"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14164"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}