CINXE.COM

<!doctype html> <html lang="en" id="top-of-site" class="js"> <head> <title>Specifics On CSS Specificity | CSS-Tricks</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#ff7a18"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search"> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://css-tricks.com/feed/"> <link rel="preconnect" href="https://s3.buysellads.com"> <link rel="dns-prefetch" href="https://s3.buysellads.com"> <link rel="preconnect" href="https://srv.buysellads.com"> <link rel="dns-prefetch" href="https://srv.buysellads.com"> <link rel="preconnect" href="https://static.codepen.io"> <link rel="dns-prefetch" href="https://static.codepen.io"> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="Let's specifically cover this subject. (rimshot!)"/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://css-tricks.com/specifics-on-css-specificity/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Specifics On CSS Specificity | CSS-Tricks" /> <meta property="og:description" content="Let's specifically cover this subject. (rimshot!)" /> <meta property="og:url" content="https://css-tricks.com/specifics-on-css-specificity/" /> <meta property="og:site_name" content="CSS-Tricks" /> <meta property="article:publisher" content="https://www.facebook.com/CSSTricks" /> <meta property="article:tag" content="CSS" /> <meta property="article:section" content="Articles" /> <meta property="og:updated_time" content="2021-01-20T07:54:27-07:00" /> <meta property="og:image" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg" /> <meta property="og:image:secure_url" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="600" /> <meta property="og:image:alt" content="Specifics on CSS Specificity" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="article:published_time" content="2010-05-10T02:02:01-06:00" /> <meta property="article:modified_time" content="2021-01-20T07:54:27-07:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Specifics On CSS Specificity | CSS-Tricks" /> <meta name="twitter:description" content="Let's specifically cover this subject. (rimshot!)" /> <meta name="twitter:site" content="@CSS" /> <meta name="twitter:creator" content="@chriscoyier" /> <meta name="twitter:image" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Chris Coyier" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="5 minutes" /> <script data-jetpack-boost="ignore" type="application/ld+json" class="rank-math-schema">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://css-tricks.com/#organization","name":"CSS-Tricks","sameAs":["https://www.facebook.com/CSSTricks","https://twitter.com/CSS"],"logo":{"@type":"ImageObject","@id":"https://css-tricks.com/#logo","url":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","contentUrl":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","caption":"CSS-Tricks","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://css-tricks.com/#website","url":"https://css-tricks.com","name":"CSS-Tricks","publisher":{"@id":"https://css-tricks.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg?fit=1200%2C600&ssl=1","url":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg?fit=1200%2C600&ssl=1","width":"1200","height":"600","inLanguage":"en-US"},{"@type":"WebPage","@id":"https://css-tricks.com/specifics-on-css-specificity/#webpage","url":"https://css-tricks.com/specifics-on-css-specificity/","name":"Specifics On CSS Specificity | CSS-Tricks","datePublished":"2010-05-10T02:02:01-06:00","dateModified":"2021-01-20T07:54:27-07:00","isPartOf":{"@id":"https://css-tricks.com/#website"},"primaryImageOfPage":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg?fit=1200%2C600&ssl=1"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://css-tricks.com/author/chriscoyier/","name":"Chris Coyier","url":"https://css-tricks.com/author/chriscoyier/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96&d=retro&r=pg","url":"https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96&d=retro&r=pg","caption":"Chris Coyier","inLanguage":"en-US"},"sameAs":["http://chriscoyier.net","https://twitter.com/chriscoyier"],"worksFor":{"@id":"https://css-tricks.com/#organization"}},{"@type":"BlogPosting","headline":"Specifics On CSS Specificity | CSS-Tricks","datePublished":"2010-05-10T02:02:01-06:00","dateModified":"2021-01-20T07:54:27-07:00","author":{"@id":"https://css-tricks.com/author/chriscoyier/","name":"Chris Coyier"},"publisher":{"@id":"https://css-tricks.com/#organization"},"description":"Let's specifically cover this subject. (rimshot!)","name":"Specifics On CSS Specificity | CSS-Tricks","@id":"https://css-tricks.com/specifics-on-css-specificity/#richSnippet","isPartOf":{"@id":"https://css-tricks.com/specifics-on-css-specificity/#webpage"},"image":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/specificity.jpg?fit=1200%2C600&ssl=1"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://css-tricks.com/specifics-on-css-specificity/#webpage"}}]}</script>  <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//i0.wp.com' /> <link rel='dns-prefetch' href='//c0.wp.com' /> <link rel='dns-prefetch' href='//widgets.wp.com' /> <link rel="alternate" type="application/rss+xml" title="CSS-Tricks » Specifics on CSS Specificity Comments Feed" href="https://css-tricks.com/specifics-on-css-specificity/feed/" /> <link rel='stylesheet' id='css-tricks-style-css' href='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/style.css?ver=cache_bust=1732117801409' type='text/css' media='all' /> <style id='acf-post-slider-style-inline-css' type='text/css'> .post-slider { box-sizing: content-box; display: flex; margin: 0 0 var(--gap) 0; padding: 0 1rem 1rem; position: relative; @media (min-width: 1200px) { &::after { content: ""; position: absolute; right: 0; top: 0; bottom: 3.6rem; width: 5px; height: 100%; border-radius: 5px; box-shadow: -10px 0 20px 3px #000; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); } body.home & { background: none; } } @media (max-width: 1200px) { scrollbar-color: #666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } padding-bottom: var(--gap); padding-left: 5px; overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-points-x: repeat(250px); scroll-snap-type: x mandatory; -webkit-scroll-snap-type: x mandatory; .mini-card { scroll-snap-align: start; } } } .post-slider-header { color: #fff; margin-top: 2rem; flex: 0 0 250px; margin-right: 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; @media (max-width: 1200px) { scroll-snap-align: start; scroll-margin-inline-start: 5px; } p { font-size: var(--font-size-body); margin: 0; } a { text-decoration: none; } &::before { --offset: 5px; content: ""; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); position: absolute; top: calc(var(--offset) * -1); left: calc(var(--offset) * -1); width: calc(100% + 10px); height: calc(100% + 10px); z-index: 1; border-radius: 12px; } &::after { content: ""; position: absolute; top: 0; left: 0; width: calc(100%); height: calc(100%); background: #000; z-index: 2; border-radius: 8px; } transform: translateY(-10px); > * { color: inherit; position: relative; z-index: 3; } @media (max-width: 800px) { flex: 0 0 175px; } } .mini-card-grid { display: flex; gap: 1rem; margin: 0 0 1.5rem 0; position: relative; scrollbar-gutter: always; padding: 3rem 0 3rem 2rem; margin: 0; overflow-x: scroll; -webkit-overflow-scrolling: touch; scrollbar-color: #666666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } @media (max-width: 1200px) { overflow-x: visible; } } .mini-card { padding: 1.5rem; border-radius: 16px; background: linear-gradient(85deg, #434343, #262626); color: #fff; display: flex; flex-direction: column; transition: 0.2s; margin: 0; min-width: 300px; min-height: 350px; box-shadow: -2rem 0 3rem -2rem black; a { text-decoration: none; } h3 a { color: white !important; } h3 .aal_anchor { display: none; } .tags { margin: 0 0 0.5rem 0; } .author-name { color: #fff; } time { display: block; margin: 0 0 0.25rem 0; color: #777; strong { color: #d4d4d4; } } &:hover, &:focus-within { transform: translate(0, -1rem) rotate(3deg); & ~ .mini-card { transform: translateX(130px); } } &:first-child { &:hover, &:focus-within { /* Cover clickable area on the left edge of first card */ transform: translate(-0.5rem, -1rem) rotate(3deg); } } &:not(:first-child) { margin-left: -130px; box-shadow: -3rem 0 3rem -2rem black; } @media (max-width: 1200px) { min-width: 220px; &:not(:first-child) { margin-left: -30px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(30px); } } } @media (max-width: 800px) { min-width: 190px; &:not(:first-child) { margin-left: -10px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(10px); } } } } .mini-card-title { font-size: 1.3rem; margin: 0 0 1rem 0; } </style> <style id='css-tricks-baseline-status-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. * * Replace them with your own styles or remove the file completely. */ baseline-status { --color-text: #fff; --color-outline: var(--orange); background: #000; border: solid 5px var(--color-outline); border-radius: 8px; color: var(--color-text); display: block; margin-block-end: var(--gap); padding: calc(var(--gap) / 4); } @media (prefers-color-scheme: dark) { baseline-status { --color-text: #fff; --color-link: var(--orange); } } baseline-status::slotted(h1) { display: none; } /*# sourceMappingURL=style-index.css.map*/ </style> <style id='css-tricks-feedbin-starred-feed-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. */ .wp-block-css-tricks-feedbin-starred-feed { container: feedbin/inline-size; display: grid; gap: 0; } .wp-block-css-tricks-feedbin-starred-feed .article-grid { gap: 0; grid-template-columns: 1fr; } .wp-block-css-tricks-feedbin-starred-feed .starred-item { margin-block-end: 1rem; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) { font-family: "Blanco", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", system-serif; font-size: 1.35rem; line-height: 1.35; margin-block: calc(var(--gap) / 4); margin-top: 0; padding-block-end: calc(var(--gap) / 4); } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a { color: var(--blue) !important; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a:is(:hover, :focus, #specificity) { -webkit-text-decoration: 1px solid var(--blue); text-decoration: 1px solid var(--blue); } .wp-block-css-tricks-feedbin-starred-feed .starred-item cite { flex: 0 1 300px; font-style: oblique; line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-block-css-tricks-feedbin-starred-feed .starred-item span { line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .starred-item { border-radius: 12px; display: grid; gap: 1rem; grid-template-columns: 1fr; } @container feedbin (width >= 600px) { .starred-item { grid-template-columns: 40% 60%; } } .starred-item .article-article { background-color: #262626; background-position: top 0 center; background-repeat: no-repeat; background-image: radial-gradient(50% 50% at top center, rgba(0, 0, 0, 0.66), #262626), linear-gradient(180deg, #000, #262626); background-size: 120% 2000px, 100% 2000px; border-radius: 12px 0 0 12px; color: #fff; gap: 1rem; padding: 1.5rem; } .starred-item .article-article h2 a { color: #fff; } .starred-item .article-article span:has(strong) { font-size: 1rem; } .starred-item .article-summary { padding: var(--gap); } .starred-item .article-summary :is(h2, h3, h4) { color: #262626; } .starred-item .article-summary p { margin-block-end: calc(var(--gap) / 4); } .starred-item .article-summary hr, .starred-item .article-summary figure { display: none; } @container article-grid (width <= 600px) { .starred-item .article-summary { display: none; } } @keyframes shadow-reveal { 0% { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=style-index.css.map*/ </style> <link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='rank-math-rich-snippet-style-inline-css' type='text/css'> /*! * Plugin: Rank Math * URL: https://rankmath.com/wordpress/plugin/seo-suite/ * Name: rank-math-review-snippet.css */@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes loading{0%{background-size:20% 50% ,20% 50% ,20% 50%}20%{background-size:20% 20% ,20% 50% ,20% 50%}40%{background-size:20% 100%,20% 20% ,20% 50%}60%{background-size:20% 50% ,20% 100%,20% 20%}80%{background-size:20% 50% ,20% 50% ,20% 100%}100%{background-size:20% 50% ,20% 50% ,20% 50%}}@keyframes loading{0%{background-size:20% 50% ,20% 50% ,20% 50%}20%{background-size:20% 20% ,20% 50% ,20% 50%}40%{background-size:20% 100%,20% 20% ,20% 50%}60%{background-size:20% 50% ,20% 100%,20% 20%}80%{background-size:20% 50% ,20% 50% ,20% 100%}100%{background-size:20% 50% ,20% 50% ,20% 50%}}:root{--rankmath-wp-adminbar-height: 0}#rank-math-rich-snippet-wrapper{overflow:hidden}#rank-math-rich-snippet-wrapper h5.rank-math-title{display:block;font-size:18px;line-height:1.4}#rank-math-rich-snippet-wrapper .rank-math-review-image{float:right;max-width:40%;margin-left:15px}#rank-math-rich-snippet-wrapper .rank-math-review-data{margin-bottom:15px}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper{width:100%;padding:0 0 20px 0;float:left;clear:both;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-total{border:0;display:block;margin:0;width:auto;float:left;text-align:left;padding:0;font-size:24px;line-height:1;font-weight:700;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star{float:left;margin-left:15px;margin-top:5px;position:relative;z-index:99;line-height:1}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper{display:inline-block;white-space:nowrap;position:relative;color:#e7e7e7}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper .rank-math-review-result{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#ffbe01}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper i{font-size:18px;-webkit-text-stroke-width:1px;font-style:normal;padding:0 2px;line-height:inherit}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper i:before{content:"\2605"}body.rtl #rank-math-rich-snippet-wrapper .rank-math-review-image{float:left;margin-left:0;margin-right:15px}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-total{float:right}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star{float:right;margin-left:0;margin-right:15px}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result{left:auto;right:0}@media screen and (max-width: 480px){#rank-math-rich-snippet-wrapper .rank-math-review-image{display:block;max-width:100%;width:100%;text-align:center;margin-right:0}#rank-math-rich-snippet-wrapper .rank-math-review-data{clear:both}}.clear{clear:both} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="https://api.w.org/" href="https://css-tricks.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://css-tricks.com/wp-json/wp/v2/posts/855" /><link rel='shortlink' href='https://css-tricks.com/?p=855' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fspecifics-on-css-specificity%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fspecifics-on-css-specificity%2F&format=xml" />  <style type="text/css" media="screen"> #post-855 h2 { height: 223px; background: url(/wp-content/csstricks-uploads/specificity-title.png) no-repeat; text-indent: -9999px; } #post-855 hr { margin: 20px 0; } </style> <style>img#wpstats{display:none}</style> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1" sizes="32x32" /> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" sizes="192x192" /> <link rel="apple-touch-icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> <meta name="msapplication-TileImage" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> </head> <body class="post-template-default single single-post postid-855 single-format-standard category-articles"> <div id="top-of-site-pixel-anchor"></div> <header class="site-header" id="site-header"> <a id="skip-nav" class="skip-nav screen-reader-text" href="#maincontent">Skip to main content</a> <div class="logo"> <a href="/"> <div class="screen-reader-text">CSS-Tricks</div> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <svg width="322" height="32" viewBox="0 0 322 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-logo-text"> <path d="M16.4923 21.5221C16.0962 21.5202 15.7132 21.6668 15.4167 21.9339C13.9468 23.1946 12.5055 23.8978 10.3687 23.8978C6.5073 23.8978 3.70719 20.644 3.70719 16.6104V16.5521C3.70719 12.5441 6.53598 9.31211 10.3687 9.31211C12.142 9.31448 13.8542 9.97091 15.1873 11.1595C15.4503 11.3483 15.7586 11.4616 16.0796 11.4875C16.4007 11.5134 16.7227 11.4509 17.0117 11.3067C17.3008 11.1624 17.5463 10.9416 17.7224 10.6676C17.8985 10.3935 17.9987 10.0764 18.0125 9.74936C18.0137 9.47206 17.952 9.19822 17.8319 8.9492C17.7119 8.70017 17.5369 8.4827 17.3205 8.31374C15.5637 6.93643 13.513 6 10.3973 6C4.30235 6 0 10.7769 0 16.6104V16.6687C0 22.5642 4.38481 27.2354 10.2683 27.2354C13.5273 27.2354 15.6928 26.1824 17.5966 24.4808C17.7764 24.3189 17.9207 24.1204 18.0201 23.8982C18.1196 23.676 18.1719 23.435 18.1738 23.1909C18.1617 22.7453 17.9795 22.3219 17.6656 22.0104C17.3518 21.699 16.931 21.5238 16.4923 21.5221V21.5221ZM29.7041 14.9853C25.8069 14.0453 24.8855 13.342 24.8855 11.7607V11.7024C24.8855 10.3506 26.0973 9.26839 28.1732 9.26839C29.7615 9.26839 31.2601 9.79308 32.8341 10.8206C33.1116 10.996 33.4322 11.0882 33.7591 11.0866C33.977 11.089 34.1933 11.0476 34.3954 10.9647C34.5976 10.8818 34.7816 10.7591 34.9369 10.6037C35.0921 10.4482 35.2156 10.2631 35.3002 10.0589C35.3848 9.85479 35.4289 9.63565 35.4298 9.41414C35.4373 9.12618 35.3692 8.84139 35.2324 8.58907C35.0957 8.33675 34.8953 8.12601 34.6518 7.97852C32.7598 6.69182 30.5246 6.02662 28.2485 6.07287C24.2401 6.07287 21.3576 8.50321 21.3576 12.023V12.0813C21.3576 15.8635 23.7776 17.1533 28.0764 18.21C31.8266 19.0881 32.6333 19.8788 32.6333 21.3472V21.4055C32.6333 22.9286 31.2494 23.9853 29.048 23.9853C26.977 23.9843 24.9735 23.2368 23.394 21.8756C23.1425 21.6924 22.8468 21.5819 22.5385 21.5558C22.2301 21.5296 21.9206 21.5888 21.6426 21.7271C21.3647 21.8653 21.1288 22.0774 20.9599 22.3409C20.7911 22.6044 20.6956 22.9095 20.6835 23.2237C20.6822 23.4928 20.7443 23.7583 20.8647 23.9979C20.9851 24.2375 21.1602 24.4444 21.3755 24.601C23.5587 26.2783 26.2216 27.1842 28.9584 27.1808C33.1998 27.1808 36.172 24.8925 36.172 21.0521V20.9938C36.1827 17.5942 33.9706 16.0384 29.7041 14.9853ZM47.5839 14.9853C43.6903 14.0453 42.7689 13.342 42.7689 11.7607V11.7024C42.7689 10.3506 43.9807 9.26839 46.0566 9.26839C47.6413 9.26839 49.1435 9.79308 50.7175 10.8206C50.995 10.996 51.3157 11.0882 51.6425 11.0866C51.8604 11.089 52.0767 11.0476 52.2788 10.9647C52.481 10.8818 52.665 10.7591 52.8203 10.6037C52.9756 10.4482 53.0991 10.2631 53.1837 10.0589C53.2683 9.85479 53.3123 9.63565 53.3132 9.41414C53.3207 9.12618 53.2526 8.84139 53.1158 8.58907C52.9791 8.33675 52.7787 8.12601 52.5352 7.97852C50.6382 6.68823 48.3962 6.02286 46.114 6.07287C42.1056 6.07287 39.2195 8.50321 39.2195 12.023V12.0813C39.2195 15.8635 41.6431 17.1533 45.9419 18.21C49.6921 19.0881 50.4988 19.8788 50.4988 21.3472V21.4055C50.4988 22.9286 49.1149 23.9853 46.9135 23.9853C44.8438 23.9835 42.8417 23.236 41.2631 21.8756C41.0112 21.6927 40.7154 21.5825 40.4069 21.5565C40.0985 21.5304 39.7888 21.5896 39.5108 21.7277C39.2327 21.8659 38.9965 22.0778 38.8272 22.3412C38.6579 22.6045 38.5618 22.9094 38.549 23.2237C38.5485 23.4926 38.611 23.7578 38.7314 23.9973C38.8517 24.2368 39.0264 24.4437 39.241 24.601C41.4259 26.2776 44.0897 27.1834 46.8274 27.1808C51.0688 27.1808 54.0375 24.8925 54.0375 21.0521V20.9938C54.0446 17.5942 51.854 16.0384 47.5839 14.9853ZM63.94 16.1586H58.5155C58.0741 16.1791 57.6574 16.3718 57.3522 16.6965C57.0469 17.0212 56.8766 17.453 56.8766 17.9021C56.8766 18.3512 57.0469 18.783 57.3522 19.1077C57.6574 19.4325 58.0741 19.6251 58.5155 19.6456H63.94C64.3815 19.6251 64.7981 19.4325 65.1034 19.1077C65.4086 18.783 65.5789 18.3512 65.5789 17.9021C65.5789 17.453 65.4086 17.0212 65.1034 16.6965C64.7981 16.3718 64.3815 16.1791 63.94 16.1586V16.1586ZM80.2818 6.36437H66.88C66.6576 6.35381 66.4355 6.3892 66.227 6.4684C66.0185 6.54759 65.828 6.66895 65.667 6.82512C65.506 6.98129 65.3778 7.16903 65.2902 7.37699C65.2027 7.58495 65.1575 7.8088 65.1575 8.035C65.1575 8.2612 65.2027 8.48505 65.2902 8.69301C65.3778 8.90097 65.506 9.08871 65.667 9.24488C65.828 9.40105 66.0185 9.52241 66.227 9.6016C66.4355 9.6808 66.6576 9.71619 66.88 9.70563H71.7811V25.246C71.7811 25.7292 71.9699 26.1925 72.3061 26.5342C72.6423 26.8759 73.0983 27.0678 73.5737 27.0678C74.0491 27.0678 74.5051 26.8759 74.8413 26.5342C75.1775 26.1925 75.3663 25.7292 75.3663 25.246V9.70563H80.2818C80.7045 9.68556 81.1033 9.50079 81.3955 9.18968C81.6876 8.87858 81.8506 8.46505 81.8506 8.035C81.8506 7.60495 81.6876 7.19142 81.3955 6.88032C81.1033 6.56921 80.7045 6.38444 80.2818 6.36437V6.36437ZM94.2106 6.36437H87.0113C86.7749 6.36043 86.54 6.40486 86.3208 6.49502C86.1015 6.58518 85.9024 6.71923 85.7351 6.8892C85.5679 7.05916 85.436 7.26157 85.3473 7.48439C85.2586 7.70721 85.2148 7.94588 85.2187 8.18621V25.2496C85.2796 25.6839 85.4926 26.0812 85.8186 26.3687C86.1447 26.6562 86.5618 26.8145 86.9934 26.8145C87.4251 26.8145 87.8422 26.6562 88.1682 26.3687C88.4942 26.0812 88.7073 25.6839 88.7681 25.2496V19.7331H93.239L98.1401 26.0949C98.3271 26.3875 98.584 26.6271 98.8869 26.7915C99.1897 26.9559 99.5285 27.0397 99.8718 27.035C100.092 27.0389 100.31 26.9987 100.515 26.9167C100.719 26.8348 100.906 26.7126 101.064 26.5573C101.222 26.402 101.349 26.2166 101.436 26.0116C101.524 25.8066 101.571 25.586 101.575 25.3626C101.555 24.847 101.35 24.3568 100.998 23.9853L97.1326 19.0298C99.8431 18.1809 101.718 16.1878 101.718 12.9011V12.8428C101.739 12.0293 101.602 11.2196 101.314 10.46C101.027 9.70038 100.595 9.00573 100.044 8.41577C98.7496 7.1259 96.7741 6.36437 94.2214 6.36437H94.2106ZM98.115 13.1052C98.115 15.1857 96.5016 16.5339 93.9632 16.5339H88.7717V9.64733H93.9345C96.559 9.64733 98.115 10.8498 98.115 13.0505V13.1052ZM107.777 6.21862C107.543 6.21326 107.31 6.25564 107.093 6.34324C106.875 6.43083 106.677 6.56188 106.509 6.72865C106.342 6.89541 106.21 7.09451 106.12 7.31419C106.03 7.53386 105.984 7.76967 105.985 8.00767V25.246C106.005 25.7098 106.201 26.1478 106.531 26.4686C106.861 26.7895 107.301 26.9685 107.758 26.9685C108.214 26.9685 108.654 26.7895 108.984 26.4686C109.314 26.1478 109.51 25.7098 109.531 25.246V8.00403C109.532 7.76947 109.488 7.53695 109.4 7.31992C109.313 7.10289 109.183 6.90565 109.02 6.73962C108.857 6.57359 108.664 6.44206 108.45 6.35263C108.237 6.2632 108.008 6.21765 107.777 6.21862V6.21862ZM130.246 21.5221C129.85 21.5191 129.467 21.6659 129.171 21.9339C127.697 23.1946 126.256 23.8978 124.123 23.8978C120.258 23.8978 117.458 20.644 117.458 16.6104V16.5521C117.458 12.5441 120.286 9.31211 124.123 9.31211C125.895 9.3147 127.606 9.97116 128.938 11.1595C129.246 11.3991 129.625 11.5274 130.013 11.5238C130.243 11.5287 130.472 11.4867 130.686 11.4004C130.9 11.314 131.094 11.185 131.259 11.021C131.423 10.857 131.553 10.6613 131.641 10.4454C131.73 10.2295 131.775 9.9978 131.774 9.76393C131.773 9.48692 131.711 9.21364 131.591 8.96487C131.471 8.71611 131.297 8.4984 131.082 8.32832C129.321 6.951 127.274 6.01458 124.159 6.01458C118.042 6.01458 113.761 10.7915 113.761 16.625V16.6833C113.761 22.5788 118.142 27.25 124.029 27.25C127.288 27.25 129.45 26.197 131.354 24.4954C131.534 24.3335 131.678 24.135 131.778 23.9128C131.877 23.6906 131.93 23.4496 131.931 23.2055C131.923 22.7567 131.742 22.3291 131.427 22.0144C131.112 21.6997 130.688 21.523 130.246 21.5221ZM144.946 15.3934L151.235 9.23924C151.431 9.07489 151.59 8.86863 151.7 8.63504C151.809 8.40145 151.867 8.14624 151.869 7.88743C151.872 7.66729 151.831 7.44889 151.749 7.24507C151.667 7.04126 151.546 6.85615 151.392 6.70065C151.239 6.54515 151.057 6.42239 150.856 6.33961C150.655 6.25683 150.44 6.21569 150.224 6.21862C149.944 6.21503 149.668 6.27539 149.414 6.39524C149.161 6.51509 148.938 6.69134 148.761 6.91092L139.188 16.6833V8.00403C139.168 7.54018 138.972 7.10224 138.642 6.78138C138.311 6.46052 137.872 6.28145 137.415 6.28145C136.958 6.28145 136.519 6.46052 136.189 6.78138C135.858 7.10224 135.663 7.54018 135.642 8.00403V25.2423C135.663 25.7062 135.858 26.1441 136.189 26.465C136.519 26.7858 136.958 26.9649 137.415 26.9649C137.872 26.9649 138.311 26.7858 138.642 26.465C138.972 26.1441 139.168 25.7062 139.188 25.2423V20.9938L142.476 17.7691L148.965 26.186C149.125 26.4441 149.347 26.6571 149.61 26.8054C149.872 26.9538 150.167 27.0327 150.467 27.035C150.7 27.0439 150.932 27.0048 151.149 26.9203C151.367 26.8358 151.565 26.7075 151.733 26.5431C151.9 26.3788 152.033 26.1817 152.124 25.9638C152.214 25.7459 152.261 25.5117 152.26 25.2751C152.257 24.7993 152.084 24.3408 151.772 23.9853L144.946 15.3934ZM163.518 14.9853C159.624 14.0453 158.703 13.342 158.703 11.7607V11.7024C158.703 10.3506 159.915 9.26839 161.99 9.26839C163.579 9.26839 165.077 9.79308 166.651 10.8206C166.929 10.996 167.25 11.0882 167.576 11.0866C167.794 11.089 168.011 11.0476 168.213 10.9647C168.415 10.8818 168.599 10.7591 168.754 10.6037C168.909 10.4482 169.033 10.2631 169.118 10.0589C169.202 9.85479 169.246 9.63565 169.247 9.41414C169.256 9.12724 169.189 8.84317 169.054 8.59095C168.92 8.33873 168.721 8.12739 168.48 7.97852C166.588 6.69182 164.353 6.02662 162.077 6.07287C158.068 6.07287 155.182 8.50321 155.182 12.023V12.0813C155.182 15.8635 157.606 17.1533 161.904 18.21C165.655 19.0881 166.461 19.8788 166.461 21.3472V21.4055C166.461 22.9286 165.077 23.9853 162.876 23.9853C160.806 23.9835 158.804 23.236 157.226 21.8756C156.974 21.6927 156.678 21.5825 156.369 21.5565C156.061 21.5304 155.751 21.5896 155.473 21.7277C155.195 21.8659 154.959 22.0778 154.79 22.3412C154.62 22.6045 154.524 22.9094 154.512 23.2237C154.511 23.4931 154.574 23.7586 154.695 23.9982C154.816 24.2379 154.991 24.4446 155.207 24.601C157.39 26.2783 160.053 27.1842 162.79 27.1808C167.031 27.1808 170 24.8925 170 21.0521V20.9938C169.989 17.5942 167.799 16.0384 163.529 14.9853H163.518Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.018 29V23.9655C216.367 23.9655 220.48 18.6838 218.439 13.0624C217.697 10.993 216.027 9.32513 213.955 8.58385C208.328 6.54532 203.04 10.6841 203.04 15.9967V15.9967H198C198 7.50281 206.225 0.862157 215.13 3.64197C219.026 4.84655 222.118 7.96611 223.355 11.8578C226.138 20.7841 219.521 29 211.018 29V29Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.017 23.9966H206.008V18.9929V18.9929H211.017V18.9929V23.9966Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M206.007 27.8589H202.142V27.8589V23.998H206.007V27.8589V27.8589Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M202.145 23.9984H198.898V23.9984V20.7861V20.7861H202.114V20.7861V23.9984H202.145Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M239.312 14.8042C238.176 14.0276 236.755 13.6275 235.098 13.6275H231.5V25.0183H235.098C236.755 25.0183 238.176 24.5946 239.312 23.7709C239.927 23.3238 240.425 22.7119 240.756 21.9352C241.087 21.1586 241.277 20.2643 241.277 19.2523C241.277 18.2403 241.111 17.346 240.756 16.5929C240.425 15.8162 239.951 15.2043 239.312 14.8042V14.8042ZM233.609 15.535H234.745C236 15.535 237.041 15.7704 237.823 16.2646C238.699 16.7824 239.148 17.7943 239.148 19.23C239.148 20.7126 238.699 21.7482 237.823 22.313V22.313C237.065 22.8072 236.047 23.0661 234.769 23.0661H233.633V15.535H233.609Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M243.809 13.463C243.454 13.463 243.17 13.5807 242.933 13.816C242.697 14.0514 242.555 14.3338 242.555 14.6868C242.555 15.0398 242.673 15.3222 242.91 15.5811C243.147 15.8165 243.454 15.9341 243.809 15.9341C244.164 15.9341 244.448 15.8165 244.709 15.5811C244.946 15.3458 245.064 15.0398 245.064 14.6868C245.064 14.3338 244.946 14.0514 244.709 13.816C244.448 13.6042 244.141 13.463 243.809 13.463V13.463Z" fill="white"/> <rect x="242.768" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M252.164 17.6515C251.548 17.1102 250.862 16.8043 250.128 16.8043C249.015 16.8043 248.068 17.1808 247.358 17.9575C246.624 18.7106 246.269 19.6755 246.269 20.8287C246.269 21.9583 246.624 22.9233 247.334 23.6999C248.044 24.453 248.991 24.8296 250.104 24.8296C250.885 24.8296 251.548 24.6178 252.116 24.1941V24.3824C252.116 25.0414 251.927 25.5591 251.595 25.9122C251.24 26.2652 250.743 26.4535 250.151 26.4535C249.204 26.4535 248.636 26.0769 247.902 25.1355L246.529 26.4535L246.577 26.5005C246.885 26.9241 247.334 27.3242 247.926 27.7008C248.518 28.0773 249.299 28.2892 250.175 28.2892C251.382 28.2892 252.353 27.9126 253.063 27.183C253.773 26.4535 254.152 25.465 254.152 24.2647V16.969H252.164V17.6515V17.6515ZM251.619 22.3826C251.264 22.7827 250.814 22.9709 250.223 22.9709C249.631 22.9709 249.181 22.7827 248.85 22.3826C248.495 21.9825 248.329 21.4647 248.329 20.8057C248.329 20.1468 248.495 19.629 248.85 19.2289C249.205 18.8288 249.655 18.6406 250.223 18.6406C250.814 18.6406 251.264 18.8288 251.619 19.2289C251.974 19.629 252.14 20.1703 252.14 20.8057C252.164 21.4647 251.974 21.9825 251.619 22.3826V22.3826Z" fill="white"/> <rect x="255.883" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M256.924 13.463C256.569 13.463 256.285 13.5807 256.048 13.816C255.811 14.0514 255.669 14.3338 255.669 14.6868C255.669 15.0398 255.788 15.3222 256.024 15.5811C256.261 15.8165 256.569 15.9341 256.924 15.9341C257.279 15.9341 257.563 15.8165 257.823 15.5811C258.06 15.3458 258.178 15.0398 258.178 14.6868C258.178 14.3338 258.06 14.0514 257.823 13.816C257.563 13.6042 257.279 13.463 256.924 13.463V13.463Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M262.367 14.8034H260.379V16.9686H259.219V18.8043H260.379V22.1227C260.379 23.1582 260.592 23.9113 260.994 24.3349C261.421 24.7586 262.154 24.9939 263.172 24.9939C263.504 24.9939 263.835 24.9939 264.167 24.9704H264.261V23.1347L263.575 23.1817C263.101 23.1817 262.77 23.0876 262.604 22.9229C262.438 22.7581 262.367 22.4051 262.367 21.8638V18.8278H264.261V16.9921H262.367V14.8034V14.8034Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M273.78 13.603H275.815V24.9937H273.78V13.603Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M296.291 22.1231C295.936 22.5232 295.557 22.8762 295.273 23.0645V23.0645C294.989 23.2527 294.634 23.3233 294.232 23.3233C293.64 23.3233 293.143 23.1115 292.764 22.6644C292.385 22.2172 292.172 21.6524 292.172 20.9699C292.172 20.2874 292.361 19.7226 292.74 19.2754C293.119 18.8282 293.616 18.6164 294.208 18.6164C294.871 18.6164 295.557 19.0165 296.149 19.7226L297.498 18.4517V18.4517C296.623 17.322 295.51 16.8043 294.184 16.8043C293.072 16.8043 292.101 17.2043 291.32 18.0045C290.539 18.8047 290.136 19.7932 290.136 20.9934C290.136 22.1937 290.539 23.2057 291.32 23.9823C292.101 24.7825 293.072 25.1826 294.184 25.1826C295.652 25.1826 296.836 24.5471 297.64 23.394L296.291 22.1231V22.1231Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M304.624 18.1001C304.34 17.7 303.938 17.3705 303.464 17.1352C302.991 16.8998 302.423 16.7822 301.784 16.7822C300.647 16.7822 299.724 17.2058 299.038 18.006C298.351 18.8297 298.02 19.8417 298.02 21.0184C298.02 22.2422 298.399 23.2307 299.132 24.0073C299.866 24.7604 300.86 25.1605 302.068 25.1605C303.441 25.1605 304.553 24.6192 305.406 23.5366L305.453 23.4895L304.127 22.2187V22.2187C304.009 22.3599 303.82 22.5246 303.678 22.6894C303.488 22.8776 303.299 23.0188 303.086 23.113C302.778 23.2542 302.447 23.3483 302.068 23.3483C301.5 23.3483 301.05 23.1836 300.695 22.8541C300.363 22.5481 300.174 22.1481 300.127 21.6303H305.5L305.524 20.9007C305.524 20.383 305.453 19.8887 305.311 19.418C305.122 18.9238 304.908 18.5002 304.624 18.1001V18.1001ZM300.197 19.982C300.292 19.6055 300.481 19.276 300.718 19.0407C301.002 18.7818 301.357 18.6406 301.783 18.6406C302.281 18.6406 302.659 18.7818 302.92 19.0642C303.156 19.3231 303.298 19.629 303.322 20.0056H300.197V19.982Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M312.414 17.5809V17.5809C311.798 17.0631 310.946 16.8043 309.881 16.8043C309.195 16.8043 308.579 16.9455 308.011 17.2279C307.49 17.4868 306.969 17.9339 306.638 18.5223L306.662 18.5458L307.964 19.7932C308.508 18.9459 309.1 18.64 309.881 18.64C310.307 18.64 310.662 18.7576 310.923 18.9694C311.183 19.1813 311.325 19.4637 311.325 19.8402V20.2403C310.828 20.0991 310.331 20.005 309.834 20.005C308.816 20.005 308.011 20.2403 307.395 20.711C306.78 21.1817 306.472 21.8642 306.472 22.7114C306.472 23.4646 306.733 24.0765 307.253 24.5236C307.774 24.9708 308.437 25.1826 309.218 25.1826C309.999 25.1826 310.71 24.8766 311.372 24.3353V24.9943H313.361V19.8402C313.337 18.8518 313.029 18.0987 312.414 17.5809V17.5809ZM308.814 21.9348C309.051 21.7701 309.359 21.6995 309.785 21.6995C310.282 21.6995 310.803 21.7936 311.323 21.9819V22.7585C310.874 23.1586 310.282 23.3704 309.572 23.3704C309.217 23.3704 308.956 23.2998 308.767 23.1351C308.577 22.9939 308.483 22.8056 308.483 22.5467C308.483 22.2878 308.577 22.076 308.814 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M321.148 17.721C320.58 17.0856 319.798 16.7797 318.78 16.7797C317.976 16.7797 317.313 17.015 316.839 17.4622V16.9679H314.851V24.9932H316.887V20.5687C316.887 19.9568 317.029 19.4861 317.313 19.1331C317.597 18.7801 317.999 18.6154 318.52 18.6154C318.97 18.6154 319.325 18.7566 319.585 19.0625C319.846 19.3685 319.964 19.7921 319.964 20.3334V24.9697H322V20.3334C322 19.2273 321.716 18.3565 321.148 17.721V17.721Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M271.225 17.5809V17.5809C270.609 17.0631 269.757 16.8043 268.692 16.8043C268.005 16.8043 267.39 16.9455 266.821 17.2279C266.301 17.4868 265.78 17.9339 265.448 18.5223L265.472 18.5458L266.774 19.7932C267.319 18.9459 267.91 18.64 268.692 18.64C269.118 18.64 269.473 18.7576 269.733 18.9694C269.994 19.1813 270.136 19.4637 270.136 19.8402V20.2403C269.638 20.0991 269.141 20.005 268.644 20.005C267.626 20.005 266.821 20.2403 266.206 20.711C265.59 21.1817 265.283 21.8642 265.283 22.7114C265.283 23.4646 265.543 24.0765 266.064 24.5236C266.585 24.9708 267.248 25.1826 268.029 25.1826C268.81 25.1826 269.52 24.8766 270.183 24.3353V24.9943H272.171V19.8402C272.148 18.8518 271.84 18.0987 271.225 17.5809V17.5809ZM267.625 21.9348C267.862 21.7701 268.169 21.6995 268.595 21.6995C269.092 21.6995 269.613 21.7936 270.134 21.9819V22.7585C269.684 23.1586 269.092 23.3704 268.382 23.3704C268.027 23.3704 267.767 23.2998 267.577 23.1351C267.388 22.9939 267.293 22.8056 267.293 22.5467C267.293 22.2878 267.388 22.076 267.625 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M283.153 25.1587C279.91 25.1587 277.259 22.5228 277.259 19.2986C277.259 16.0744 279.91 13.4385 283.153 13.4385C286.396 13.4385 289.048 16.0744 289.048 19.2986C289.048 22.5228 286.42 25.1587 283.153 25.1587V25.1587ZM283.152 15.4859C281.045 15.4859 279.341 17.1804 279.341 19.275C279.341 21.3696 281.045 23.0641 283.152 23.0641C285.259 23.0641 286.963 21.3696 286.963 19.275C286.963 17.1804 285.259 15.4859 283.152 15.4859V15.4859Z" fill="white"/> <path d="M231.652 9H231.156L232.412 3.1H233.912C234.315 3.1 234.637 3.16667 234.88 3.3C235.123 3.43333 235.299 3.612 235.408 3.836C235.517 4.06 235.572 4.30667 235.572 4.576C235.572 4.92267 235.513 5.236 235.396 5.516C235.281 5.79333 235.117 6.03333 234.904 6.236C234.693 6.43867 234.441 6.59333 234.148 6.7C233.855 6.80667 233.532 6.86 233.18 6.86H232.108L231.652 9ZM232.148 6.676L231.98 6.424H233.172C233.559 6.424 233.895 6.34667 234.18 6.192C234.465 6.03467 234.687 5.81733 234.844 5.54C235.001 5.26267 235.08 4.94 235.08 4.572C235.08 4.36133 235.037 4.18 234.952 4.028C234.867 3.87333 234.729 3.75333 234.54 3.668C234.351 3.58 234.1 3.536 233.788 3.536H232.592L232.872 3.26L232.148 6.676ZM237.474 9.076C237.111 9.076 236.799 9.004 236.538 8.86C236.276 8.71333 236.075 8.51067 235.934 8.252C235.792 7.99333 235.722 7.692 235.722 7.348C235.722 6.97467 235.786 6.62667 235.914 6.304C236.044 5.98133 236.224 5.7 236.454 5.46C236.686 5.21733 236.956 5.02933 237.266 4.896C237.578 4.76 237.915 4.692 238.278 4.692C238.643 4.692 238.955 4.76667 239.214 4.916C239.475 5.06533 239.675 5.26933 239.814 5.528C239.952 5.784 240.022 6.07467 240.022 6.4C240.022 6.79467 239.955 7.156 239.822 7.484C239.691 7.80933 239.51 8.09067 239.278 8.328C239.046 8.56533 238.775 8.74933 238.466 8.88C238.159 9.01067 237.828 9.076 237.474 9.076ZM237.51 8.632C237.886 8.632 238.224 8.54133 238.526 8.36C238.83 8.176 239.071 7.92133 239.25 7.596C239.428 7.268 239.518 6.88667 239.518 6.452C239.518 6.18533 239.468 5.95467 239.37 5.76C239.271 5.56267 239.127 5.40933 238.938 5.3C238.751 5.19067 238.52 5.136 238.246 5.136C237.952 5.136 237.682 5.192 237.434 5.304C237.188 5.41333 236.975 5.56667 236.794 5.764C236.615 5.96133 236.475 6.19067 236.374 6.452C236.275 6.71333 236.226 6.996 236.226 7.3C236.226 7.71067 236.336 8.036 236.558 8.276C236.782 8.51333 237.099 8.632 237.51 8.632ZM243.959 9L243.627 4.752H244.055L244.379 8.76H244.287L245.967 4.752H246.499L244.639 9H243.959ZM241.159 9L241.095 4.752H241.595L241.579 8.76H241.483L243.503 4.752H243.967L241.843 9H241.159ZM246.97 7.084L247.066 6.64H250.506L250.406 6.78C250.42 6.724 250.432 6.65867 250.442 6.584C250.453 6.50667 250.458 6.42267 250.458 6.332C250.458 6.11067 250.413 5.91067 250.322 5.732C250.234 5.55067 250.1 5.40667 249.918 5.3C249.737 5.19333 249.506 5.14 249.226 5.14C248.925 5.14 248.649 5.196 248.398 5.308C248.15 5.42 247.934 5.576 247.75 5.776C247.569 5.97333 247.428 6.204 247.326 6.468C247.228 6.72933 247.178 7.012 247.178 7.316C247.178 7.57467 247.225 7.80267 247.318 8C247.414 8.19733 247.56 8.35067 247.754 8.46C247.949 8.56933 248.194 8.624 248.49 8.624C248.738 8.624 248.958 8.59467 249.15 8.536C249.345 8.47467 249.51 8.39467 249.646 8.296C249.785 8.19733 249.896 8.09333 249.978 7.984C250.064 7.872 250.122 7.76667 250.154 7.668H250.654C250.614 7.82533 250.534 7.98667 250.414 8.152C250.297 8.31467 250.142 8.46667 249.95 8.608C249.758 8.74933 249.533 8.864 249.274 8.952C249.018 9.03733 248.733 9.08 248.418 9.08C248.056 9.08 247.745 9.00667 247.486 8.86C247.23 8.71067 247.034 8.50533 246.898 8.244C246.765 7.98 246.698 7.676 246.698 7.332C246.698 6.96133 246.764 6.61733 246.894 6.3C247.028 5.98 247.212 5.7 247.446 5.46C247.684 5.21733 247.958 5.02933 248.27 4.896C248.582 4.76 248.917 4.692 249.274 4.692C249.632 4.692 249.933 4.76667 250.178 4.916C250.426 5.06267 250.614 5.26267 250.742 5.516C250.87 5.76933 250.934 6.05467 250.934 6.372C250.934 6.484 250.924 6.60667 250.902 6.74C250.884 6.87333 250.861 6.988 250.834 7.084H246.97ZM251.615 9L252.515 4.752H253.011L252.747 6.004L252.559 5.948C252.604 5.81467 252.673 5.676 252.767 5.532C252.86 5.38533 252.977 5.248 253.119 5.12C253.26 4.992 253.424 4.88933 253.611 4.812C253.8 4.732 254.012 4.692 254.247 4.692C254.415 4.692 254.549 4.70667 254.651 4.736C254.755 4.76533 254.817 4.788 254.839 4.804L254.603 5.284C254.579 5.26533 254.528 5.24133 254.451 5.212C254.376 5.18267 254.261 5.168 254.107 5.168C253.883 5.168 253.685 5.212 253.515 5.3C253.344 5.38533 253.199 5.49733 253.079 5.636C252.959 5.77467 252.861 5.92267 252.787 6.08C252.715 6.23733 252.664 6.38667 252.635 6.528L252.107 9H251.615ZM255.181 7.084L255.277 6.64H258.717L258.617 6.78C258.631 6.724 258.643 6.65867 258.653 6.584C258.664 6.50667 258.669 6.42267 258.669 6.332C258.669 6.11067 258.624 5.91067 258.533 5.732C258.445 5.55067 258.311 5.40667 258.129 5.3C257.948 5.19333 257.717 5.14 257.437 5.14C257.136 5.14 256.86 5.196 256.609 5.308C256.361 5.42 256.145 5.576 255.961 5.776C255.78 5.97333 255.639 6.204 255.537 6.468C255.439 6.72933 255.389 7.012 255.389 7.316C255.389 7.57467 255.436 7.80267 255.529 8C255.625 8.19733 255.771 8.35067 255.965 8.46C256.16 8.56933 256.405 8.624 256.701 8.624C256.949 8.624 257.169 8.59467 257.361 8.536C257.556 8.47467 257.721 8.39467 257.857 8.296C257.996 8.19733 258.107 8.09333 258.189 7.984C258.275 7.872 258.333 7.76667 258.365 7.668H258.865C258.825 7.82533 258.745 7.98667 258.625 8.152C258.508 8.31467 258.353 8.46667 258.161 8.608C257.969 8.74933 257.744 8.864 257.485 8.952C257.229 9.03733 256.944 9.08 256.629 9.08C256.267 9.08 255.956 9.00667 255.697 8.86C255.441 8.71067 255.245 8.50533 255.109 8.244C254.976 7.98 254.909 7.676 254.909 7.332C254.909 6.96133 254.975 6.61733 255.105 6.3C255.239 5.98 255.423 5.7 255.657 5.46C255.895 5.21733 256.169 5.02933 256.481 4.896C256.793 4.76 257.128 4.692 257.485 4.692C257.843 4.692 258.144 4.76667 258.389 4.916C258.637 5.06267 258.825 5.26267 258.953 5.516C259.081 5.76933 259.145 6.05467 259.145 6.372C259.145 6.484 259.135 6.60667 259.113 6.74C259.095 6.87333 259.072 6.988 259.045 7.084H255.181ZM261.526 9.076C261.072 9.076 260.714 8.93067 260.45 8.64C260.186 8.34933 260.054 7.94133 260.054 7.416C260.054 7.048 260.108 6.7 260.218 6.372C260.33 6.044 260.487 5.75467 260.69 5.504C260.895 5.25067 261.14 5.05333 261.426 4.912C261.711 4.768 262.028 4.696 262.378 4.696C262.666 4.696 262.922 4.756 263.146 4.876C263.372 4.996 263.551 5.16133 263.682 5.372C263.812 5.58267 263.878 5.82533 263.878 6.1C263.878 6.172 263.872 6.248 263.862 6.328C263.851 6.40533 263.839 6.46667 263.826 6.512L263.486 6.52C263.499 6.47467 263.508 6.424 263.514 6.368C263.522 6.30933 263.526 6.26 263.526 6.22C263.526 6.01733 263.475 5.83467 263.374 5.672C263.275 5.50933 263.139 5.38133 262.966 5.288C262.795 5.19467 262.6 5.148 262.382 5.148C262.091 5.148 261.832 5.208 261.606 5.328C261.382 5.44533 261.192 5.608 261.038 5.816C260.883 6.02133 260.764 6.25867 260.682 6.528C260.602 6.79467 260.562 7.076 260.562 7.372C260.562 7.76933 260.656 8.07467 260.846 8.288C261.038 8.50133 261.308 8.608 261.658 8.608C261.922 8.608 262.17 8.54667 262.402 8.424C262.636 8.30133 262.836 8.13867 263.002 7.936C263.17 7.73067 263.279 7.504 263.33 7.256L263.722 7.264C263.65 7.6 263.507 7.90533 263.294 8.18C263.08 8.45467 262.819 8.67333 262.51 8.836C262.203 8.996 261.875 9.076 261.526 9.076ZM262.958 9L264.286 2.748H264.782L263.454 9H262.958ZM268.755 9.076C268.47 9.076 268.214 9.01467 267.987 8.892C267.76 8.76933 267.582 8.60133 267.451 8.388C267.323 8.172 267.259 7.92667 267.259 7.652C267.259 7.57733 267.263 7.50533 267.271 7.436C267.282 7.36667 267.294 7.30667 267.307 7.256L267.643 7.248C267.635 7.28 267.627 7.32267 267.619 7.376C267.614 7.42933 267.611 7.48133 267.611 7.532C267.611 7.73467 267.66 7.91733 267.759 8.08C267.86 8.24267 267.996 8.372 268.167 8.468C268.34 8.56133 268.536 8.608 268.755 8.608C269.043 8.608 269.299 8.54933 269.523 8.432C269.75 8.312 269.94 8.148 270.095 7.94C270.252 7.732 270.371 7.49467 270.451 7.228C270.531 6.96133 270.571 6.68 270.571 6.384C270.571 5.97867 270.479 5.67067 270.295 5.46C270.111 5.24933 269.843 5.144 269.491 5.144C269.243 5.144 269 5.204 268.763 5.324C268.526 5.444 268.32 5.604 268.147 5.804C267.974 6.004 267.86 6.22533 267.807 6.468L267.423 6.456C267.495 6.12 267.643 5.81867 267.867 5.552C268.091 5.28533 268.356 5.076 268.663 4.924C268.972 4.76933 269.29 4.692 269.615 4.692C270.071 4.692 270.428 4.83733 270.687 5.128C270.948 5.41867 271.079 5.83067 271.079 6.364C271.079 6.732 271.023 7.08 270.911 7.408C270.802 7.73333 270.644 8.02133 270.439 8.272C270.234 8.52267 269.988 8.72 269.703 8.864C269.418 9.00533 269.102 9.076 268.755 9.076ZM266.775 9L268.107 2.748H268.603L267.275 9H266.775ZM271.22 10.776C271.121 10.776 271.031 10.7693 270.948 10.756C270.865 10.7453 270.816 10.736 270.8 10.728L270.892 10.284C270.921 10.3027 270.975 10.3173 271.052 10.328C271.127 10.3413 271.2 10.348 271.272 10.348C271.456 10.348 271.619 10.3027 271.76 10.212C271.904 10.1213 272.031 10.0067 272.14 9.868C272.249 9.72933 272.344 9.58667 272.424 9.44L272.66 9.012L272.084 4.752H272.588L273.072 8.552H272.984L275.036 4.752H275.568L272.976 9.42C272.848 9.652 272.707 9.87067 272.552 10.076C272.4 10.284 272.217 10.452 272.004 10.58C271.791 10.7107 271.529 10.776 271.22 10.776Z" fill="white"/> <line x1="184.5" y1="-2.18557e-08" x2="184.5" y2="32" stroke="white" stroke-opacity="0.5"/> </svg> </a> </div> <div class="header-middle-area"> <nav id="main-nav" class="main-nav" role="navigation"> <ul id="menu-primary" class="menu"><li id="menu-item-379211" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-379211"><a href="https://css-tricks.com/category/articles/"><span>Articles</span></a></li> <li id="menu-item-379212" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379212"><a href="https://css-tricks.com/category/notes/"><span>Notes</span></a></li> <li id="menu-item-379154" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379154"><a href="https://css-tricks.com/category/links/"><span>Links</span></a></li> <li id="menu-item-377808" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377808"><a href="/guides"><span>Guides</span></a></li> <li id="menu-item-377809" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377809"><a href="/almanac"><span>Almanac</span></a></li> <li id="menu-item-382690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-382690"><a href="https://css-tricks.com/picks/"><span>Picks</span></a></li> <li id="menu-item-379272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379272"><a href="/random"><span>Shuffle</span></a></li> </ul></nav> <div class="search-and-account"> <a href="https://www.google.com/search?q=site:css-tricks.com%20layout" class="jetpack-search-filter__link"> <span class="screen-reader-text">Search</span> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.0726 10.4326C12.4801 10.4326 10.4 12.5451 10.4 15.1053C10.4 17.6978 12.5125 19.7779 15.0726 19.7779C17.6651 19.7779 19.7453 17.6654 19.7453 15.1053C19.744 12.544 17.664 10.4326 15.0726 10.4326Z" fill="white"/> <path d="M16.0327 0.447479C7.42401 0.447479 0.447693 7.4238 0.447693 16.0324C0.447693 24.6398 7.42401 31.6161 16.0314 31.6161C24.64 31.6161 31.6163 24.6398 31.6163 16.0324C31.6163 7.4238 24.64 0.447479 16.0327 0.447479ZM23.6163 24.0324C23.3926 24.2562 23.0401 24.385 22.6563 24.385C22.2726 24.385 21.9526 24.2575 21.6963 24.0324L18.7526 21.0887L18.4651 21.2487C17.4088 21.825 16.2576 22.145 15.0724 22.145C11.1998 22.145 8.06509 19.0087 8.06509 15.1376C8.06509 11.265 11.2013 8.13023 15.0724 8.13023C18.9451 8.13023 22.0798 11.2665 22.0798 15.1376C22.0798 16.5138 21.6961 17.8251 20.9273 18.9776L20.7348 19.2976L23.6473 22.2101C23.8711 22.4664 24.0311 22.7864 24.0311 23.1376C23.9998 23.4563 23.8723 23.7763 23.616 24.0326L23.6163 24.0324Z" fill="white"/> </svg> </a> </div> </div> </header> <div class="page-wrap"> <div class="articles-and-sidebar "> <main id="post-855"> <article> <header class="mega-header"> <style> html { --featured-img: url(https://css-tricks.com/wp-content/uploads/2010/05/specificity.jpg); --bg-blend-mode: multiply; background-size: 120% 2000px, 100% auto; } </style> <div class="tags"> <a href="https://css-tricks.com/tag/css/" rel="tag">CSS</a> </div> <h1 class="article-title"> Specifics on CSS Specificity </h1> <div class="author-row"> <a href="https://css-tricks.com/author/chriscoyier/" aria-label="Author page of Chris Coyier"> <img loading="lazy" alt='Avatar of Chris Coyier' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x' class='avatar avatar-80 photo skip-lazy' height='80' width='80' decoding='async'/> </a> <div> <a class="author-name" href="https://css-tricks.com/author/chriscoyier/"> Chris Coyier </a> on <time datetime="2021-01-20"> Jan 20, 2021 </time> </div> </div> </header> <div class="article-sponsor"> <p> Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering <a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">40% off for 4 months, and 40 free migrations</a>. </p> </div> <div class="article-content"> <p>Let’s specifically cover this subject. (rimshot!)</p> <p>The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.</p> <span id="more-855"></span> <p>Here is a simple unordered list:</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><ul id="summer-drinks"> <li>Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul></code></pre> <p>Now you want to designate one of these your favorite drink and change its styling a bit. You need a hook for this so you apply it via a class name on the list element.</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><ul id="summer-drinks"> <li class="favorite">Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul></code></pre> <p>Now you pop open your CSS and do your styling for your new class:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.favorite { color: red; font-weight: bold; }</code></pre> <p>Then you take a look at your work, but alas, <em>it didn’t work!</em> The text of your favorite drink didn’t turn red or go bold! Something fishy is at work here.</p> <p>Poking around more in the CSS, you find this:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; }</code></pre> <p>There is your trouble right there. Two different CSS selectors are telling that text what color and font-weight to be. There is only one statement for font-size, so clearly that one will take effect. These aren’t “conflicts” per-say, but the browser does need to decide which one of these statements to honor. It does so by following a standard set of specificity rules.</p> <p>I think this confuses some beginners because they haven’t quite gotten this sorted out yet. They might think because the .favorite statement is “<em>further down in the CSS</em>” or because the class=”favorite” is “<em>closer to the actual text</em>” in the HTML that will be the one that “wins”.</p> <p>In fact, the order of selectors in your CSS does play a role and the “further down” one does in fact win when the specificity values are exactly the same. For example:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.favorite { color: red; } .favorite { color: black; }</code></pre> <p>The color will be black… but I digress.</p> <p>The point here is <strong>you want to be as specific as it makes sense to be</strong> every chance you get. Even with the simple example presented above, it will become obvious to you eventually that simply using a class name to target that “favorite drink” isn’t going to cut it, or won’t be very safe even if it did work. It would have been smart to use this:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">ul#summer-drinks li.favorite { color: red; font-weight: bold; }</code></pre> <p>That is what I’m calling “being as specific as it makes sense to be”. You could actually be way more specific and use something like this:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">html body div#pagewrap ul#summer-drinks li.favorite { color: red; font-weight: bold; }</code></pre> <p>But that is over the top. It makes your CSS harder to read and yields no real benefits. Another way to juice up the specificity value for your “.favorite” class is to use the !important declaration.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.favorite { color: red !important; font-weight: bold !important; }</code></pre> <p>I once heard it said that !important is like the Jedi mind trick for CSS. Indeed it is, and you can force your will over the styling of elements by using it. But !important imposes that will through drastically increasing the specificity of that particular selectors property.</p> <p>The !important declaration can be easily misused if misunderstood. It is best used to keep your CSS cleaner, in examples where you know elements with a particular class selector should use a certain set of styling <em>no matter what</em>. Conversely, not used just as a quick crutch to override the styling of something instead of figuring out how the CSS was structured and working by the original author.</p> <p>One of my classic examples is:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.last { margin-right: 0 !important; }</code></pre> <p>I often use that in situations where there are multiple floated blocks, for the last block on the right in a row. That ensures the last block doesn’t have any right margin which would prevent it from butting snugly against the right edge of its parent. Each of those blocks probably has more specific CSS selectors that apply the right margin to begin with, but !important will break through that and take care of it with one simple/clean class.</p> <h3 class="wp-block-heading" id="h-calculating-css-specificity-value"><a href="#aa-calculating-css-specificity-value" aria-hidden="true" class="aal_anchor" id="aa-calculating-css-specificity-value"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calculating CSS Specificity Value</h3> <p>Why is that our first attempt at changing the color and font-weight failed? As we learned, it was because simply using the class name by itself had a <em>lower specificity value</em> and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were <strong>class</strong> and <strong>ID</strong>. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has <em>infinitely</em> more specificity value! That is, no amount of classes alone can outweigh an ID.</p> <p>Let’s take a look at how the numbers are actually calculated:</p> <figure class="wp-block-image size-large"><img loading="lazy" data-recalc-dims="1" fetchpriority="high" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?resize=570%2C346&ssl=1" alt="" class="wp-image-333167" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?resize=300%2C182&ssl=1 300w" sizes="(min-width: 735px) 864px, 96vw" /></figure> <p>In otherwords:</p> <ul class="wp-block-list"><li>If the element has inline styling, that automatically<sup>1</sup> wins (1,0,0,0 points)</li><li>For each ID value, apply 0,1,0,0 points</li><li>For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points</li><li>For each element reference, apply 0,0,0,1 point</li></ul> <p>You can generally read the values as if they were just a number, like 1,0,0,0 is “1000”, and so clearly wins over a specificity of 0,1,0,0 or “100”. The commas are there to remind us that this isn’t really a “base 10” system, in that you could technically have a specificity value of like 0,1,13,4 – and that “13” doesn’t spill over like a base 10 system would.</p> <h3 class="wp-block-heading" id="h-sample-calculations"><a href="#aa-sample-calculations" aria-hidden="true" class="aal_anchor" id="aa-sample-calculations"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sample calculations</h3> <figure class="wp-block-image size-large"><img loading="lazy" data-recalc-dims="1" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-1_kqzhog.png?resize=570%2C346&ssl=1" alt="" class="wp-image-333168" title="" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-1_kqzhog.png?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-1_kqzhog.png?resize=300%2C182&ssl=1 300w" sizes="(min-width: 735px) 864px, 96vw" /></figure> <hr class="wp-block-separator"/> <figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-2.png?resize=570%2C346&ssl=1" alt="" class="wp-image-333170" title="" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-2.png?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-2.png?resize=300%2C182&ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure> <hr class="wp-block-separator"/> <figure class="wp-block-image"><img data-recalc-dims="1" loading="lazy" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/cssspecificity-calc-3v2.jpg?resize=570%2C346" alt="" class="wp-image-16451" title="cssspecificity-calc-3v2" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/cssspecificity-calc-3v2.jpg?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2010/05/cssspecificity-calc-3v2.jpg?resize=300%2C182&ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure> <p><strong>Update:</strong> The :not() sort-of-pseudo-class adds no specificity by itself, only what’s inside the parens is added to specificity value.</p> <hr class="wp-block-separator"/> <figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-4.png?resize=570%2C346&ssl=1" alt="" class="wp-image-333171" title="" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-4.png?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-4.png?resize=300%2C182&ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure> <hr class="wp-block-separator"/> <figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="570" height="346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-5-1.png?resize=570%2C346&ssl=1" alt="" class="wp-image-333174" title="" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-5-1.png?w=570&ssl=1 570w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/cssspecificity-calc-5-1.png?resize=300%2C182&ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure> <h3 class="wp-block-heading" id="h-important-notes"><a href="#aa-important-notes" aria-hidden="true" class="aal_anchor" id="aa-important-notes"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Important Notes</h3> <ul class="wp-block-list"><li>The universal selector (*) has no specificity value (0,0,0,0)</li><li>Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0</li><li>The pseudo-class :not() adds no specificity by itself, only what’s inside it’s parentheses.</li><li>The <strong>!important</strong> value appended a CSS property value is an <em>automatic win</em>. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.</li></ul> <h3 class="wp-block-heading" id="h-resources"><a href="#aa-resources" aria-hidden="true" class="aal_anchor" id="aa-resources"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Resources</h3> <ul class="wp-block-list"><li>Smashing Magazine has a <a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="noopener">pretty comprehensive article</a> on CSS Specificity</li><li><a href="http://www.w3.org/TR/css3-selectors/#specificity" rel="noopener">W3 spec on specificity in CSS3</a></li><li><a href="http://www.brunildo.org/test/IEASpec.html#a" rel="noopener">IE Quirks</a> (try viewing this page in Fx and then IE)</li><li><a href="http://fu2k.org/alex/css/hacks/fuzzyspecificity" rel="noopener">Fuzzy Specificity Hack</a>: IE (even beta 8!) and older Opera browsers have a bug honoring the correct selector under specific circumstances.</li></ul> </div> </article> </main> <aside class="entry-unrelated sidebar"> <div id="scroll-ad-position"></div> <div class="toc"> <h2 class="toc-heading"> <svg viewBox="0 0 175 35"> <text fill="#fff" x="0" y="30">TOC</text> </svg> </h2> <ol class="toc-list"> <li class="toc-link"> <a href="#aa-calculating-css-specificity-value">Calculating CSS Specificity Value</a> </li><li class="toc-link"> <a href="#aa-sample-calculations">Sample calculations</a> </li><li class="toc-link"> <a href="#aa-important-notes">Important Notes</a> </li><li class="toc-link"> <a href="#aa-resources">Resources</a> </li></ol> </div> <div id="all-modules"></div> </aside> </div> <div class="related-ads-comments-wrap"> <div class="related-ads-comments"> <div class="articles-and-sidebar"> <div class="after-article-note article-sponsor"> <em>Psst!</em> Create a DigitalOcean account and get <a href="https://try.digitalocean.com/css-tricks/?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=global_brand_ad_en&utm_content=conversion_postarticle_psst">$200 in free credit</a> for cloud-based hosting and services. </div> </div> <section class="respond-area"> <h2 class="comments-title" id="comments"> <span>Comments</span> </h2> <ol class="commentlist" id="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-31094"> <div class="comment-wrap" id="comment-31094"> <div class="comment-author-wrap"> <div class="comment-author">ChaZ</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31094"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T06:28:00-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Hello!<br /> Thanks for this article! I’ve gotten into a real habit of using very specific styles recently. Also I really like how you layout your CSS file from looking at some of the screencasts you have! That has helped a lot and now my CSS files are so much easier to read.<br /> Keep up the good work on the site!<br /> ChaZ</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31094-6747b6f9af971' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31094&origin=css-tricks.com&obj_id=45537868-31094-6747b6f9af971' data-name='like-comment-frame-45537868-31094-6747b6f9af971'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31095"> <div class="comment-wrap" id="comment-31095"> <div class="comment-author-wrap"> <div class="comment-author">mikemc</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31095"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T06:42:15-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>I’m one of those “confused beginners” referenced in the article. :) This helps a lot. This will definitely be bookmarked and referred to often.</p> <p>Thx…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31095-6747b6f9afd1c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31095&origin=css-tricks.com&obj_id=45537868-31095-6747b6f9afd1c' data-name='like-comment-frame-45537868-31095-6747b6f9afd1c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31096"> <div class="comment-wrap" id="comment-31096"> <div class="comment-author-wrap"> <div class="comment-author">koewnet</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31096"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T07:03:54-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>I would also recommend checking out and test the <a href="http://www.rebelinblue.com/specificity.php" rel="nofollow ugc">CSS Specificity Calculator</a>. Just paste in your CSS and it’ll calculate the specificity for you. It really comes in handy if you’re working on large CSS files (instead of multiple smaller ones).</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31096-6747b6f9affc9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31096&origin=css-tricks.com&obj_id=45537868-31096-6747b6f9affc9' data-name='like-comment-frame-45537868-31096-6747b6f9affc9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31097"> <div class="comment-wrap" id="comment-31097"> <div class="comment-author-wrap"> <div class="comment-author">Mike Bobiney</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31097"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T07:17:16-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>This makes specifity much easier to understand. Come to think of it, this would make for a nice CSS editor plug-in!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31097-6747b6f9b020b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31097&origin=css-tricks.com&obj_id=45537868-31097-6747b6f9b020b' data-name='like-comment-frame-45537868-31097-6747b6f9b020b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31099"> <div class="comment-wrap" id="comment-31099"> <div class="comment-author-wrap"> <div class="comment-author">Fredrik Kalseth</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31099"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T07:42:59-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Great explanation, love the visuals.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31099-6747b6f9b045d' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31099&origin=css-tricks.com&obj_id=45537868-31099-6747b6f9b045d' data-name='like-comment-frame-45537868-31099-6747b6f9b045d'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31100"> <div class="comment-wrap" id="comment-31100"> <div class="comment-author-wrap"> <div class="comment-author">htl</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31100"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T08:06:19-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Thanks for the post. I’ll care about the calculation beside the order of the code :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31100-6747b6f9b0687' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31100&origin=css-tricks.com&obj_id=45537868-31100-6747b6f9b0687' data-name='like-comment-frame-45537868-31100-6747b6f9b0687'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31101"> <div class="comment-wrap" id="comment-31101"> <div class="comment-author-wrap"> <div class="comment-author">Harry Roberts</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31101"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T08:10:56-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>I’ve always understood specificity but I’ve never seen the calculation method, pretty nifty.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31101-6747b6f9b08a5' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31101&origin=css-tricks.com&obj_id=45537868-31101-6747b6f9b08a5' data-name='like-comment-frame-45537868-31101-6747b6f9b08a5'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31102"> <div class="comment-wrap" id="comment-31102"> <div class="comment-author-wrap"> <div class="comment-author">Grafiko</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31102"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T08:15:15-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Great explanation. The analogy of the point system makes it really simple to understand.. Thanks</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31102-6747b6f9b0add' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31102&origin=css-tricks.com&obj_id=45537868-31102-6747b6f9b0add' data-name='like-comment-frame-45537868-31102-6747b6f9b0add'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1 buried" id="li-comment-31103"> <div class="comment-wrap" id="comment-31103"> <div class="comment-author-wrap"> <div class="comment-author">H.S.Laszlo</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31103"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T08:58:40-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Thanks for this excellent and useful article! This an interesting method.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31103-6747b6f9b0ced' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31103&origin=css-tricks.com&obj_id=45537868-31103-6747b6f9b0ced' data-name='like-comment-frame-45537868-31103-6747b6f9b0ced'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31108"> <div class="comment-wrap" id="comment-31108"> <div class="comment-author-wrap"> <div class="comment-author">adam</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31108"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T10:11:33-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>firebug can spare you the “fishing around in your css,” as it nicely displays which selectors are being applied to any element you chose.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31108-6747b6f9b0f60' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31108&origin=css-tricks.com&obj_id=45537868-31108-6747b6f9b0f60' data-name='like-comment-frame-45537868-31108-6747b6f9b0f60'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31110"> <div class="comment-wrap" id="comment-31110"> <div class="comment-author-wrap"> <div class="comment-author">Fouad Masoud</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31110"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T10:40:33-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Very nicely written.<br /> Thank u.</p> <p>I rarely run into those troubles but when i do; first thing that hits my mind is firebug.</p> <p>But whats new to me here is the “Calculating CSS Specificity Value” i read about it in some book but didnt get through to me. now its so simple to remember.</p> <p>thx again.</p> <p>Cheers</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31110-6747b6f9b11fd' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31110&origin=css-tricks.com&obj_id=45537868-31110-6747b6f9b11fd' data-name='like-comment-frame-45537868-31110-6747b6f9b11fd'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31115"> <div class="comment-wrap" id="comment-31115"> <div class="comment-author-wrap"> <div class="comment-author">Billy Girlardo</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31115"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T11:58:00-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>I’m used to looking up at the Firebug toolbar if I have the need, but yea, your graphics drive it home. Nice!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31115-6747b6f9b1464' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31115&origin=css-tricks.com&obj_id=45537868-31115-6747b6f9b1464' data-name='like-comment-frame-45537868-31115-6747b6f9b1464'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1 buried" id="li-comment-31116"> <div class="comment-wrap" id="comment-31116"> <div class="comment-author-wrap"> <div class="comment-author">Marcus AndrÃ©</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31116"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T12:03:01-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Wow, I really do think that this post is one “Aha-Moment” more for many people. Nice illustrations also.</p> <p>Greets from Germany</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31116-6747b6f9b168a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31116&origin=css-tricks.com&obj_id=45537868-31116-6747b6f9b168a' data-name='like-comment-frame-45537868-31116-6747b6f9b168a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1 featured" id="li-comment-31117"> <div class="comment-wrap" id="comment-31117"> <div class="comment-author-wrap"> <div class="comment-author">Jonathan Snook</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31117"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T13:16:17-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Just to clarify that the specificity calculator isn’t entirely accurate. For example, if you had an element with 11 classes applied to it, it would not outrank an element with a single ID selector. </p> <p>for example,</p> <p>.a .b .c .d .e .f .g .h .i .j a.k { color:red; }<br /> #myel {color:blue;}</p> <p><span class=”a b c d e f g h i j k” id=”myel”>would still be blue.</span></p> <p>The chances of this are slim but important to note.</p> <div class="explanation">Authors note: this is one of the reasons this article was updated.</div> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31117-6747b6f9b191e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31117&origin=css-tricks.com&obj_id=45537868-31117-6747b6f9b191e' data-name='like-comment-frame-45537868-31117-6747b6f9b191e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31124"> <div class="comment-wrap" id="comment-31124"> <div class="comment-author-wrap"> <div class="comment-author">adelaide design</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31124"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T19:34:49-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Great stuff for those tricky css tables in design. Thanks</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31124-6747b6f9b1b7c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31124&origin=css-tricks.com&obj_id=45537868-31124-6747b6f9b1b7c' data-name='like-comment-frame-45537868-31124-6747b6f9b1b7c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-31125"> <div class="comment-wrap" id="comment-31125"> <div class="comment-author-wrap"> <div class="comment-author">Sarven Capadisli</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31125"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-11T19:43:02-06:00">August 11, 2008</time></div> </div> <div class="comment-content"> <p>Just to add on to Jonathan Snook’s comment:</p> <p>The calculation is not based on “addition” of the values. The specificity calculation is instead based on the left most value being the highest. If two competing selectors have matching values for a given identification unit, then comparison continues towards the left next order until a larger value is found.</p> <p>I’ve highlighted this bit in a chart in my article on <a href="http://www.csarven.ca/css-specificity-and-selectors#css_specificity_chart" rel="nofollow ugc">CSS specificity</a>.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31125-6747b6f9b1e11' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31125&origin=css-tricks.com&obj_id=45537868-31125-6747b6f9b1e11' data-name='like-comment-frame-45537868-31125-6747b6f9b1e11'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-31135"> <div class="comment-wrap" id="comment-31135"> <div class="comment-author-wrap"> <div class="comment-author">pablo</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31135"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T04:36:21-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>Something I always wanted to know in CSS is whether is possible to create shortcuts to colours.</p> <p>At the moment in my websites if I need to change the color code from a font, I need to check all the classes that have the color applied to it.</p> <p>If I had, however, I “shortcut” named “myCustomYellowColor” that would have a custom color code, I would be able to change it all at once in a single line.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31135-6747b6f9b2081' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31135&origin=css-tricks.com&obj_id=45537868-31135-6747b6f9b2081' data-name='like-comment-frame-45537868-31135-6747b6f9b2081'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-75820"> <div class="comment-wrap" id="comment-75820"> <div class="comment-author-wrap"> <div class="comment-author">Teddy</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75820"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-11T01:34:18-06:00">May 11, 2010</time></div> </div> <div class="comment-content"> <p>I have never tried it but this is suposed to do what you ask for: <a href="http://lesscss.org" rel="nofollow ugc">LESS</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75820-6747b6f9b22cd' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75820&origin=css-tricks.com&obj_id=45537868-75820-6747b6f9b22cd' data-name='like-comment-frame-45537868-75820-6747b6f9b22cd'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-31136"> <div class="comment-wrap" id="comment-31136"> <div class="comment-author-wrap"> <div class="comment-author">Jaik</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31136"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T05:03:05-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>pablo, you can’t create constants or variables in CSS, but it’s something I’ve yearned for somewhat myself. The best way I found is to put the common colours in one place. For example:</p> <pre><code>h1 { font-size:1.6em; } h2 { font-size:1.4em; } a { text-decoration:none; } h1, h2, a { color:#ff9900; } </code></pre> <p>Another option if you’re after something a bit more complex is Shaun Inman’s <a href="http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer" rel="nofollow ugc">CSS Cacheer</a>.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31136-6747b6f9b24fb' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31136&origin=css-tricks.com&obj_id=45537868-31136-6747b6f9b24fb' data-name='like-comment-frame-45537868-31136-6747b6f9b24fb'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-31138"> <div class="comment-wrap" id="comment-31138"> <div class="comment-author-wrap"> <div class="comment-author">Sean Curtis</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31138"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T05:47:04-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>Pablo – CSS Variables are on their way. They’re available in the most recent builds of Webkit (Safari) but won’t be mainstream for quite a while yet.</p> <p>If you split your styles up into typography and structure/layout it can make it a lot easier to change – however depending on the size of your stylesheet it can make things a bit harder to find – eg. if you’re looking for all styles of a particular element/selector you have to reference multiple locations instead of just the combined typo/structure one.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31138-6747b6f9b2781' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31138&origin=css-tricks.com&obj_id=45537868-31138-6747b6f9b2781' data-name='like-comment-frame-45537868-31138-6747b6f9b2781'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-31141"> <div class="comment-wrap" id="comment-31141"> <div class="comment-author-wrap"> <div class="comment-author">Eric Meyer</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31141"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T06:16:56-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31117" rel="nofollow ugc">Jonathan</a> is entirely correct, and the article is deeply misleading on that particular point. Specificity is <em>not</em> base-10. It’s not base-anything-familiar: in fact, specificity values have an <em>infinite</em> base. Really. So you don’t “add points together, at least not in the manner which just about anyone reading this article would assume.</p> <p>That’s why a separated notation (commas are most common) is preferred when writing specificity values. See <a href="http://meyerweb.com/eric/css/link-specificity.html" rel="nofollow ugc">http://meyerweb.com/eric/css/link-specificity.html</a> for an example, or <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity" rel="nofollow ugc">the CSS2.1 specification itself</a>.</p> <div class="explanation">Authors note: another reason this article was updated…</div> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31141-6747b6f9b2ba1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31141&origin=css-tricks.com&obj_id=45537868-31141-6747b6f9b2ba1' data-name='like-comment-frame-45537868-31141-6747b6f9b2ba1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1 featured" id="li-comment-31146"> <div class="comment-wrap" id="comment-31146"> <div class="comment-author-wrap"> <div class="comment-author">Mark Ford</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31146"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T07:00:34-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>Andy Clarke’s <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html" rel="nofollow ugc">Specificity Wars</a> post from a couple of years back is the way I understand specificity.</p> <p>It doesn’t matter how many storm troopers you’ve got, they’ll never beat a Darth Vader!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31146-6747b6f9b2e36' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31146&origin=css-tricks.com&obj_id=45537868-31146-6747b6f9b2e36' data-name='like-comment-frame-45537868-31146-6747b6f9b2e36'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-31150"> <div class="comment-wrap" id="comment-31150"> <div class="comment-author-wrap"> <div class="comment-author">Dan</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31150"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T08:53:28-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>I thought I was pretty pro with specificity, but I never knew the different types of selectors had actual numeric values assigned to them, great article!!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31150-6747b6f9b3089' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31150&origin=css-tricks.com&obj_id=45537868-31150-6747b6f9b3089' data-name='like-comment-frame-45537868-31150-6747b6f9b3089'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-31160"> <div class="comment-wrap" id="comment-31160"> <div class="comment-author-wrap"> <div class="comment-author">Joe</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31160"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-12T12:46:32-06:00">August 12, 2008</time></div> </div> <div class="comment-content"> <p>Great article and the illustrations really help a visual person like me grasp the entire concept. Thanks.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31160-6747b6f9b3313' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31160&origin=css-tricks.com&obj_id=45537868-31160-6747b6f9b3313' data-name='like-comment-frame-45537868-31160-6747b6f9b3313'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-31228"> <div class="comment-wrap" id="comment-31228"> <div class="comment-author-wrap"> <div class="comment-author">Erik Gyepes</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31228"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-13T13:51:11-06:00">August 13, 2008</time></div> </div> <div class="comment-content"> <p>Thank you Chris for great article. I also like your visual explanation – BTW what software do you use for your visual elements in your articles?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31228-6747b6f9b3551' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31228&origin=css-tricks.com&obj_id=45537868-31228-6747b6f9b3551' data-name='like-comment-frame-45537868-31228-6747b6f9b3551'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-31257"> <div class="comment-wrap" id="comment-31257"> <div class="comment-author-wrap"> <div class="comment-author">Steve</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31257"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-14T06:56:33-06:00">August 14, 2008</time></div> </div> <div class="comment-content"> <p>Wow, Eric Meyer was a little harsh… unlike Snook’s milder and more constructive response.</p> <p>I — for one — fell in love with your base-10 approximation that so cleverly lends itself to intuitive graphical examples. I often explain specificity to co-workers, but never have my words been as clear as when (this morning) I was armed with a printed copy of your article and those cute, base-10 score bubbles. Seriously fine work!</p> <p>BUT… it feels like something <em>important</em> is missing. ;-)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31257-6747b6f9b3797' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31257&origin=css-tricks.com&obj_id=45537868-31257-6747b6f9b3797' data-name='like-comment-frame-45537868-31257-6747b6f9b3797'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-31259"> <div class="comment-wrap" id="comment-31259"> <div class="comment-author-wrap"> <div class="comment-author">Jason</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31259"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-14T07:24:53-06:00">August 14, 2008</time></div> </div> <div class="comment-content"> <p>Being specific always help to understand the code and make sure to keep control over elements.</p> <p>Thanks, this is a nice reminder !</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31259-6747b6f9b3a00' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31259&origin=css-tricks.com&obj_id=45537868-31259-6747b6f9b3a00' data-name='like-comment-frame-45537868-31259-6747b6f9b3a00'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-31321"> <div class="comment-wrap" id="comment-31321"> <div class="comment-author-wrap"> <div class="comment-author">Leandro</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31321"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-15T05:19:10-06:00">August 15, 2008</time></div> </div> <div class="comment-content"> <p>Great article!</p> <p>I suggest you to create a printable cheatsheet. That would be useful!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31321-6747b6f9b3c4d' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31321&origin=css-tricks.com&obj_id=45537868-31321-6747b6f9b3c4d' data-name='like-comment-frame-45537868-31321-6747b6f9b3c4d'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-31332"> <div class="comment-wrap" id="comment-31332"> <div class="comment-author-wrap"> <div class="comment-author">Dathan</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-31332"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2008-08-15T10:12:48-06:00">August 15, 2008</time></div> </div> <div class="comment-content"> <p>Great article on CSS specificity! An explanation isn’t even necessary, the pics suffice. But Chris, in light of Eric Meyer’s correction, why don’t you fix your pics? <strong>Remove the pluses and add the commas.</strong></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-31332-6747b6f9b3e79' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=31332&origin=css-tricks.com&obj_id=45537868-31332-6747b6f9b3e79' data-name='like-comment-frame-45537868-31332-6747b6f9b3e79'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1 featured" id="li-comment-48866"> <div class="comment-wrap" id="comment-48866"> <div class="comment-author-wrap"> <div class="comment-author">Alex</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-48866"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2009-01-21T14:01:50-07:00">January 21, 2009</time></div> </div> <div class="comment-content"> <p>I think :first-letter is a pseudo-element worth 1 point and not a pseudo-class worth 10 points. Can anyone confirm this?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-48866-6747b6f9b40e9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=48866&origin=css-tricks.com&obj_id=45537868-48866-6747b6f9b40e9' data-name='like-comment-frame-45537868-48866-6747b6f9b40e9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-48961"> <div class="comment-wrap" id="comment-48961"> <div class="comment-author-wrap"> <div class="comment-author">Eric Meyer</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-48961"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2009-01-22T07:07:31-07:00">January 22, 2009</time></div> </div> <div class="comment-content"> <p>That’s correct, Alex. Also, for obscure technical reasons, pseudo-elements are ignored in specificity calculations in CSS2 (<a href="http://www.w3.org/TR/CSS2/cascade.html#specificity" rel="nofollow ugc">http://www.w3.org/TR/CSS2/cascade.html#specificity</a>) but get one point in CSS2.1 (<a href="http://www.w3.org/TR/CSS21/cascade.html#specificity" rel="nofollow ugc">http://www.w3.org/TR/CSS21/cascade.html#specificity</a>). Which occurs depends on which set of rules your browser implemented, of course.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-48961-6747b6f9b4390' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=48961&origin=css-tricks.com&obj_id=45537868-48961-6747b6f9b4390' data-name='like-comment-frame-45537868-48961-6747b6f9b4390'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-75789"> <div class="comment-wrap" id="comment-75789"> <div class="comment-author-wrap"> <div class="comment-author">RussellUresti</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75789"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-10T07:59:52-06:00">May 10, 2010</time></div> </div> <div class="comment-content"> <p>I’m glad you updated this. I keep seeing CSS Specificity articles (Smashing Mag, NetTuts, even Malarky) getting this wrong when it comes to calculating the specificity values.</p> <p>Thanks for updating, I think it’s important to keep information as current and as accurate as possible, because there are still people searching for these answers.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75789-6747b6f9b45c5' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75789&origin=css-tricks.com&obj_id=45537868-75789-6747b6f9b45c5' data-name='like-comment-frame-45537868-75789-6747b6f9b45c5'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-75796"> <div class="comment-wrap" id="comment-75796"> <div class="comment-author-wrap"> <div class="comment-author">Scott Corgan</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75796"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-10T10:47:15-06:00">May 10, 2010</time></div> </div> <div class="comment-content"> <p>Danger comes with bloat. Careful of those classes and ids! Try planning your site before you code it!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75796-6747b6f9b47e5' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75796&origin=css-tricks.com&obj_id=45537868-75796-6747b6f9b47e5' data-name='like-comment-frame-45537868-75796-6747b6f9b47e5'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-75797"> <div class="comment-wrap" id="comment-75797"> <div class="comment-author-wrap"> <div class="comment-author">Daniel K</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75797"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-10T10:59:15-06:00">May 10, 2010</time></div> </div> <div class="comment-content"> <p>I always loved Andy Clarke’s Star Wars figure diagram for this.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75797-6747b6f9b4a35' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75797&origin=css-tricks.com&obj_id=45537868-75797-6747b6f9b4a35' data-name='like-comment-frame-45537868-75797-6747b6f9b4a35'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-75813"> <div class="comment-wrap" id="comment-75813"> <div class="comment-author-wrap"> <div class="comment-author">Garrett Winder</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75813"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-10T19:44:48-06:00">May 10, 2010</time></div> </div> <div class="comment-content"> <p>I’m w/ Scott Corgan.</p> <p>I try to use as little classes and id’s as possible. If I have to use them, I name them very generically so they can be used universally.</p> <p>Another rule of thumb is if my CSS has more than 1 class or id before the actual element then I’m probably doing something wrong.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75813-6747b6f9b4c78' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75813&origin=css-tricks.com&obj_id=45537868-75813-6747b6f9b4c78' data-name='like-comment-frame-45537868-75813-6747b6f9b4c78'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-75846"> <div class="comment-wrap" id="comment-75846"> <div class="comment-author-wrap"> <div class="comment-author">Jordan Walker</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75846"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-11T07:52:15-06:00">May 11, 2010</time></div> </div> <div class="comment-content"> <p>Nice use of graphics to illustrate your point.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75846-6747b6f9b4ed2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75846&origin=css-tricks.com&obj_id=45537868-75846-6747b6f9b4ed2' data-name='like-comment-frame-45537868-75846-6747b6f9b4ed2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-75855"> <div class="comment-wrap" id="comment-75855"> <div class="comment-author-wrap"> <div class="comment-author">Jared Heinrichs</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75855"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-11T09:12:15-06:00">May 11, 2010</time></div> </div> <div class="comment-content"> <p>Hi Chris! Great post. I was wondering if you could eventually post all your custom class CSS-Tricks in one neat post/page. For example you mentioned in this post your .last {} class trick which you made when you boarder/float issues. I think it could be usefully to put those items in the CSS reset file and you could use them over and over.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75855-6747b6f9b5185' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75855&origin=css-tricks.com&obj_id=45537868-75855-6747b6f9b5185' data-name='like-comment-frame-45537868-75855-6747b6f9b5185'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1 buried" id="li-comment-75880"> <div class="comment-wrap" id="comment-75880"> <div class="comment-author-wrap"> <div class="comment-author">florida web design</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75880"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-11T19:09:14-06:00">May 11, 2010</time></div> </div> <div class="comment-content"> <p>Well laid out. Thanks!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75880-6747b6f9b5450' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75880&origin=css-tricks.com&obj_id=45537868-75880-6747b6f9b5450' data-name='like-comment-frame-45537868-75880-6747b6f9b5450'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1 featured" id="li-comment-75884"> <div class="comment-wrap" id="comment-75884"> <div class="comment-author-wrap"> <div class="comment-author">Christoph Zillgens</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75884"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-11T23:33:34-06:00">May 11, 2010</time></div> </div> <div class="comment-content"> <p>I have in mind that the !important rule should be avoided in author stylesheets because they also overwrite declarations within a user stylesheet. As a user stylesheet should be considered more important (if a user has a special stylesheet there is a reason for this). Using !important makes it also harder for yourself to override this declaration further down in a stylesheet.</p> <p>As always, there are more solutions to your problem shown above. If a style is important for the whole list it is better to apply the styles to the list and not to the list items. If you apply the color to ul#summer-drinks there is no problem applying a different color to .favorite. You can avoid most of the specificity problems by just making use of inheritance.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75884-6747b6f9b56cc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75884&origin=css-tricks.com&obj_id=45537868-75884-6747b6f9b56cc' data-name='like-comment-frame-45537868-75884-6747b6f9b56cc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-759917"> <div class="comment-wrap" id="comment-759917"> <div class="comment-author-wrap"> <div class="comment-author">Dylan Archer</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-759917"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-12-04T17:51:26-07:00">December 4, 2013</time></div> </div> <div class="comment-content"> <p>I’m aware this post is old, but wanted to add useful information encase someone else read this comment in the future.</p> <p><a href="http://www.w3.org/TR/CSS2/cascade.html" title="Assigning property values, Cascading, and Inheritance" rel="nofollow ugc">http://www.w3.org/TR/CSS2/cascade.html</a></p> <p><strong>6.4.2 !important rules</strong></p> <blockquote><p> CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet (see cascade rule 3). </p></blockquote> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-759917-6747b6f9b59aa' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=759917&origin=css-tricks.com&obj_id=45537868-759917-6747b6f9b59aa' data-name='like-comment-frame-45537868-759917-6747b6f9b59aa'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-75895"> <div class="comment-wrap" id="comment-75895"> <div class="comment-author-wrap"> <div class="comment-author">Edson</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75895"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-12T04:45:49-06:00">May 12, 2010</time></div> </div> <div class="comment-content"> <p>Hello there, I would like to introduce a simple way to avoid that <code>.last margin-right: 0 !important</code> trick you exemplify above.</p> <p>If you could read in brazilian portuguese, fine, if don’t, please use some online translator (I did it using Google Translator for you, just click here <a href="http://bit.ly/baZpJ6" rel="nofollow ugc">http://bit.ly/baZpJ6</a>) and take a look at this article of mine <a href="http://edsonjunior.com/lista-de-itens-horizontal/" rel="nofollow ugc">http://edsonjunior.com/lista-de-itens-horizontal/</a></p> <p>By the way, nice article. Just add into my delicious! :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75895-6747b6f9b5c9e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75895&origin=css-tricks.com&obj_id=45537868-75895-6747b6f9b5c9e' data-name='like-comment-frame-45537868-75895-6747b6f9b5c9e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-75911"> <div class="comment-wrap" id="comment-75911"> <div class="comment-author-wrap"> <div class="comment-author">Miller Medeiros</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75911"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-12T07:43:41-06:00">May 12, 2010</time></div> </div> <div class="comment-content"> <p>One good reminder is to avoid being more specific than you need, sometimes it can help performance and also makes maintenance/re-use easier. You don’t need the “ul” on “ul#summer-drinks” since you can only have one ID per page.. having less and <a href="http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors" rel="nofollow ugc">more efficient selectors</a> make your page render faster.</p> <p>Another thing is to always put elements (e.g. “p, a, h1”) and generic classes (e.g. “last”) before the other rules, it’s easier to understand what will be overwritten..</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75911-6747b6f9b5f70' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75911&origin=css-tricks.com&obj_id=45537868-75911-6747b6f9b5f70' data-name='like-comment-frame-45537868-75911-6747b6f9b5f70'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1 buried" id="li-comment-75915"> <div class="comment-wrap" id="comment-75915"> <div class="comment-author-wrap"> <div class="comment-author">Patrick</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-75915"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-12T08:00:43-06:00">May 12, 2010</time></div> </div> <div class="comment-content"> <p>Well done, dude! really nice drawings *g*</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-75915-6747b6f9b6224' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=75915&origin=css-tricks.com&obj_id=45537868-75915-6747b6f9b6224' data-name='like-comment-frame-45537868-75915-6747b6f9b6224'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-76030"> <div class="comment-wrap" id="comment-76030"> <div class="comment-author-wrap"> <div class="comment-author">Jason</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-76030"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-13T21:36:28-06:00">May 13, 2010</time></div> </div> <div class="comment-content"> <p>This is one of my favorite articles about CSS specificity. I never really was able to really understand what this was all about even when I was going to school The teachers I had didn’t really explain it all that well. It is amazing that CSS really is all that powerful. I don’t even know anything about CSS5 so I have a long ways to go.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-76030-6747b6f9b6468' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=76030&origin=css-tricks.com&obj_id=45537868-76030-6747b6f9b6468' data-name='like-comment-frame-45537868-76030-6747b6f9b6468'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-76050"> <div class="comment-wrap" id="comment-76050"> <div class="comment-author-wrap"> <div class="comment-author">Ramm</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-76050"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-05-14T12:53:26-06:00">May 14, 2010</time></div> </div> <div class="comment-content"> <p>Interesting way to calculate that. Many times i ended putting “!important” instead of try to find out what was wrong.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-76050-6747b6f9b66ab' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=76050&origin=css-tricks.com&obj_id=45537868-76050-6747b6f9b66ab' data-name='like-comment-frame-45537868-76050-6747b6f9b66ab'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-77051"> <div class="comment-wrap" id="comment-77051"> <div class="comment-author-wrap"> <div class="comment-author">Gwen</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-77051"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-06-01T07:53:33-06:00">June 1, 2010</time></div> </div> <div class="comment-content"> <p>Nice of you to update this. On the web these days, all I find is older, incorrect information. You are one of the short list of good websites on the net.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-77051-6747b6f9b692b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=77051&origin=css-tricks.com&obj_id=45537868-77051-6747b6f9b692b' data-name='like-comment-frame-45537868-77051-6747b6f9b692b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-77764"> <div class="comment-wrap" id="comment-77764"> <div class="comment-author-wrap"> <div class="comment-author">Will Fastie</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-77764"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-06-12T06:56:36-06:00">June 12, 2010</time></div> </div> <div class="comment-content"> <p>Specificity is one of the most confusing aspects of CSS. Your article is the best I’ve seen at explaining it, an excellent job.</p> <p>I’m concerned about people finding this article. When I first stumbled on to the issue several years ago, I had no idea it was called “specificity.” I was simply trying to find out why styles attached to an id were overriding styles defined by class on an element contained within the id’ed element! </p> <p>It would be very interesting to learn what people searched for when they were trying to get past this and then make sure the article was responsive to such searches.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-77764-6747b6f9b6bb8' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=77764&origin=css-tricks.com&obj_id=45537868-77764-6747b6f9b6bb8' data-name='like-comment-frame-45537868-77764-6747b6f9b6bb8'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-77807"> <div class="comment-wrap" id="comment-77807"> <div class="comment-author-wrap"> <div class="comment-author">Jennifer R</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-77807"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2010-06-13T08:16:26-06:00">June 13, 2010</time></div> </div> <div class="comment-content"> <p>I don’t like using the universal selector *, sometimes i lose the control of it and maybe other designers couldn’t understand my CSS code.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-77807-6747b6f9b6e00' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=77807&origin=css-tricks.com&obj_id=45537868-77807-6747b6f9b6e00' data-name='like-comment-frame-45537868-77807-6747b6f9b6e00'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-683077"> <div class="comment-wrap" id="comment-683077"> <div class="comment-author-wrap"> <div class="comment-author">tzi</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-683077"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-20T07:02:15-07:00">November 20, 2013</time></div> </div> <div class="comment-content"> <p>Thanks for this article!</p> <p>You reminded me that the universal selector has no specificity :)</p> <p>I also use <a href="http://tzi.fr/CSS/Selector/Meaningful-selector-specificity-measure" title="Meaningful selector specificity measure " rel="nofollow ugc">a different system</a> when I want to share a specificity whit another developer.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-683077-6747b6f9b7025' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=683077&origin=css-tricks.com&obj_id=45537868-683077-6747b6f9b7025' data-name='like-comment-frame-45537868-683077-6747b6f9b7025'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-714558"> <div class="comment-wrap" id="comment-714558"> <div class="comment-author-wrap"> <div class="comment-author">Crazyturkish19</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-714558"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-26T17:32:14-07:00">November 26, 2013</time></div> </div> <div class="comment-content"> <p>I found your “!important” on specificity explanation little confusing. For example:</p> <pre><code><style> .foo{ color:red!important;} a {color:green;} </style> <p class="foo"> <a href="#">Foo</a> Bar </p> </code></pre> <p>The color of “Foo” text in “a” will be green but most people might think it is red.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-714558-6747b6f9b75ce' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=714558&origin=css-tricks.com&obj_id=45537868-714558-6747b6f9b75ce' data-name='like-comment-frame-45537868-714558-6747b6f9b75ce'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-760030"> <div class="comment-wrap" id="comment-760030"> <div class="comment-author-wrap"> <div class="comment-author">Dylan Archer</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-760030"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-12-04T18:31:54-07:00">December 4, 2013</time></div> </div> <div class="comment-content"> <p><code>!important</code> applies to the element it is assigned to, not child elements. I believe <code><a></code> is considered a child of <code><p></code> in this case. Any text within the parent element would be red regardless of what styles were applied to the universal <code>p</code> selecter; However <code><a></code> would retain it’s specified styles.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-760030-6747b6f9b7845' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=760030&origin=css-tricks.com&obj_id=45537868-760030-6747b6f9b7845' data-name='like-comment-frame-45537868-760030-6747b6f9b7845'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1410251"> <div class="comment-wrap" id="comment-1410251"> <div class="comment-author-wrap"> <div class="comment-author">Will Murray (Willscrlt)</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-1410251"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-21T16:58:39-06:00">March 21, 2014</time></div> </div> <div class="comment-content"> <p>Using the Bootstrap boilerplate from Initializr.com, there is a built-in style, which appears to have a specificity of 0,0,1,0:</p> <pre><code>.col-lg-4 { width: 33.33333333333333%; } </code></pre> <p>I wanted to give it rounded corners with a border (no problem) and give it a little room between columns so the borders don’t touch. I created this code, which to me seems to have a specificity of 0,0,2,0:</p> <pre><code>.col-lg-4.rounded { margin-right:0.5%; width: 32.83333333333333; } </code></pre> <p>According to Firebug, both selectors are considered, but the non-.rounded loses to the regular one. So, I tried creating the inverse, which to me seems to also have a specificity of 0,0,2,0:</p> <pre><code>.col-lg-4:not(.rounded) { width: 33.33333333333333%; } </code></pre> <p>Sure enough, it beats out the plain one, apparently because it has more specificity.<br /> I also tried changing around the order of the selectors, inline vs. included, and the order the classes are listed (.rounded.col-lg-4), and nothing made a difference. I did my testing in Chrome.</p> <p>So it makes me wonder why two classes on the same element along with a selector that targets both, not have higher specificity than a selector targeting only one? Or maybe my math is just wrong?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1410251-6747b6f9b7bf5' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1410251&origin=css-tricks.com&obj_id=45537868-1410251-6747b6f9b7bf5' data-name='like-comment-frame-45537868-1410251-6747b6f9b7bf5'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-1411475"> <div class="comment-wrap" id="comment-1411475"> <div class="comment-author-wrap"> <div class="comment-author">Will Murray (Willscrlt)</div> <div class="comment-time"><a href="https://css-tricks.com/specifics-on-css-specificity/#comment-1411475"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-21T20:12:39-06:00">March 21, 2014</time></div> </div> <div class="comment-content"> <p>I found the issue. There is a @media selector above that covered the style I was trying to override. Therefore, I suppose that means that @media has a very high value, though I’m not exactly sure where it would fall into this hierarchy. Perhaps that information could be added to this article?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1411475-6747b6f9b7e63' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1411475&origin=css-tricks.com&obj_id=45537868-1411475-6747b6f9b7e63' data-name='like-comment-frame-45537868-1411475-6747b6f9b7e63'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> </ol> <div class="comments-closed"> This comment thread is closed. If you have important information to share, please <a href="/contact/">contact us</a>. </div> </section> <div class="related-posts"> <div id='jp-relatedposts' class='jp-relatedposts' > </div></div> </div> </div> </div> <footer class="site-footer"> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <div class="footer-inside"> <div class="footer-message-and-form"> <p class="colophon"> CSS-Tricks is powered by <a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean</a>. </p> <div class="footer-form-wrap"> <h4>Keep up to date on web dev</h4> <p>with our hand-crafted newsletter</p> <form id="mktoForm_1402"></form> </div> </div> <div class="link-grid"> <div> <div> <h5>DigitalOcean</h5> <nav id="footer-nav-digitalocean" class="footer-nav" role="navigation"> <ul id="menu-digitalocean" class="menu"><li id="menu-item-379274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379274"><a href="https://www.digitalocean.com/about?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">About DO</a></li> <li id="menu-item-379275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379275"><a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">Cloudways</a></li> <li id="menu-item-379276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379276"><a href="https://www.digitalocean.com/legal?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">Legal stuff</a></li> <li id="menu-item-379277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379277"><a href="https://try.digitalocean.com/css-tricks/?utm_source=wordpress-1242695-4567563.cloudwaysapps.com&utm_medium=cta&utm_campaign=website_link">Get free credit!</a></li> </ul> </nav> </div> </div> <div> <div> <h5>CSS-Tricks</h5> <nav id="footer-nav-csstricks" class="footer-nav" role="navigation"> <ul id="menu-css-tricks" class="menu"><li id="menu-item-379046" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379046"><a href="https://css-tricks.com/guest-writing/">Write for us!</a></li> <li id="menu-item-379047" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379047"><a href="https://css-tricks.com/advertising/">Advertise with us</a></li> <li id="menu-item-379048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379048"><a href="https://css-tricks.com/contact/">Contact us</a></li> </ul> </nav> </div> </div> <div> <div> <h5>Social</h5> <nav id="footer-nav-social" class="footer-nav" role="navigation"> <ul id="menu-social" class="menu"><li id="menu-item-379051" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379051"><a href="https://css-tricks.com/rss-feeds/">RSS Feeds</a></li> <li id="menu-item-377816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377816"><a href="https://codepen.io/team/css-tricks">CodePen</a></li> <li id="menu-item-377813" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377813"><a href="https://mastodon.social/@csstricks">Mastodon</a></li> <li id="menu-item-382192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382192"><a href="https://bsky.app/profile/css-tricks.com">Bluesky</a></li> </ul> </nav> </div> </div> </div> </div> <a href="#top-of-site" class="top-of-site-link" data-visible="false"> <span class="screen-reader-text">Back to Top</span> <svg width="32" height="32" viewBox="0 0 100 100"> <path fill="white" d="m50 0c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355 5.2695 25.98 14.645 35.355 22.094 14.645 35.355 14.645 25.98-5.2695 35.355-14.645 14.645-22.094 14.645-35.355-5.2695-25.98-14.645-35.355-22.094-14.645-35.355-14.645zm20.832 62.5-20.832-22.457-20.625 22.457c-1.207 0.74219-2.7656 0.57812-3.7891-0.39844-1.0273-0.98047-1.2695-2.5273-0.58594-3.7695l22.918-25c0.60156-0.61328 1.4297-0.96094 2.2891-0.96094 0.86328 0 1.6914 0.34766 2.293 0.96094l22.918 25c0.88672 1.2891 0.6875 3.0352-0.47266 4.0898-1.1562 1.0508-2.9141 1.0859-4.1133 0.078125z"/> </svg> </a> <div id="consent-banner"></div> <div id="teconsent"> </div> </footer> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241128#ver=20241128&n=1' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"><div class="likes-text"><span>%d</span></div><ul class="wpl-avatars sd-like-gravatars"></ul></div> <svg width="0" height="0" class="screen-reader"> <defs> <linearGradient id="orange-to-pink" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ff7a18" /> <stop offset="40%" stop-color="#af002d" /> <stop offset="100%" stop-color="#319197" /> </linearGradient> <filter id="duotone_orange_pink"> <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"> </feColorMatrix> <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR> <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG> <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> </filter> </defs> </svg> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script><script src="https://c0.wp.com/p/jetpack/14.0/_inc/build/related-posts/related-posts.min.js" id="jetpack_related-posts-js"></script><script type="text/javascript" id="breeze-prefetch-js-extra"> /* <![CDATA[ */ var breeze_prefetch = {"local_url":"https:\/\/css-tricks.com","ignore_remote_prefetch":"1","ignore_list":["wp-admin","wp-login.php"]}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js?ver=2.1.19" id="breeze-prefetch-js"></script><script> var articleID = 855; var articleYear = 2010; var articleAuthor = "3"; var articleType = "post"; </script><script src="//anchor.digitalocean.com/js/forms2/js/forms2.min.js"></script><script>MktoForms2.loadForm("//anchor.digitalocean.com", "113-DTN-266", 1402);</script><script async="async" src="//consent.trustarc.com/notice?domain=css-tricks.com&c=teconsent&js=nj&noticeType=bb&text=true&gtm=1" crossorigin></script><script> var style = document.createElement('style'); style.innerHTML = '#teconsent {position: fixed; z-index: 1000; bottom: 0px; right: 0; font-size: 0px; height: 33px;}'; document.head.appendChild(style); </script><script type="text/javascript" id="bbp-swap-no-js-body-class"> document.body.className = document.body.className.replace( 'bbp-no-js', 'bbp-js' ); </script><script type="module" src="https://css-tricks.com/wp-content/plugins/baseline-status/baseline-status.js?ver=1.0.4"></script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/jquery-3.5.1.min.js" id="jquery-js"></script><script type="text/javascript" id="jetpack-live-comment-markdown-js-extra"> /* <![CDATA[ */ var markdownify = {"ajax_url":"\/wp-admin\/admin-ajax.php","nonce":"bab97a5464"}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/jetpack-markdown-live-preview-comments/js/markdownify.js?ver=1" id="jetpack-live-comment-markdown-js"></script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-lazy-load.min.js?ver=2.1.19" id="breeze-lazy-js"></script><script src="https://c0.wp.com/p/jetpack/14.0/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script><script src="https://stats.wp.com/e-202448.js" id="jetpack-stats-js" data-wp-strategy="defer"></script><script id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"45537868\",\"post\":\"855\",\"tz\":\"-7\",\"srv\":\"css-tricks.com\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "45537868", "855" ]); /* ]]> */ </script><script type="text/javascript">window.addEventListener("DOMContentLoaded",(e=>{document.querySelectorAll('img[loading="lazy"]').forEach((e=>{e.getBoundingClientRect().top<=window.innerHeight&&(e.loading="eager")}))}));</script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/global-concat.min.js?cache_bust=1732132808837"></script><script> window.addEventListener("load", () => { const consent = truste.cma.callApi("getGDPRConsentDecision","css-tricks.com"); // Google Analytics and Segment are functional if (consent.consentDecision.includes(2) || (consent.source === 'implied' && truste.eu.bindMap.behaviorManager !== 'eu')) { // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68528-29', 'auto'); if (typeof articleYear !== "undefined") { ga('set', 'dimension1', articleYear); } if (typeof articleAuthor !== "undefined") { ga('set', 'dimension2', articleAuthor); } if (typeof articleType !== "undefined") { ga('set', 'dimension3', articleType); } ga('send', 'pageview'); // Segment Analytics !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="nnmtLrk127wcC9ggBpAutRr4F4x4TMVz";;analytics.SNIPPET_VERSION="4.15.3"; analytics.load("nnmtLrk127wcC9ggBpAutRr4F4x4TMVz"); const analyticsProperties = {}; if (typeof articleID !== "undefined") { analyticsProperties.article_id = articleID; } if (typeof articleYear !== "undefined") { analyticsProperties.article_year = articleYear; } if (typeof articleAuthor !== "undefined") { analyticsProperties.article_author = articleAuthor; } if (typeof articleType !== "undefined") { analyticsProperties.article_type = articleType; } analytics.page({ properties: analyticsProperties }); }}(); } }); </script><script async src="https://static.codepen.io/assets/embed/ei.js"></script><script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script></body> </html>