{"id":74094,"date":"2020-01-17T10:55:34","date_gmt":"2020-01-17T05:25:34","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74094"},"modified":"2024-04-12T14:23:17","modified_gmt":"2024-04-12T08:53:17","slug":"css-specificity-an-overview-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/","title":{"rendered":"CSS Specificity: An Overview"},"content":{"rendered":"<ul>\n<li>Specificity is usually the reason why CSS-rules don\u2019t apply to some elements.<\/li>\n<li>Every selector has its place in the specificity hierarchy.<\/li>\n<li>If two selectors apply to the same element, the one with higher specificity wins.<\/li>\n<li>There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.<\/li>\n<li>When selectors have an equal specificity value, the latest rule is the one that counts.<\/li>\n<li>When selectors have an unequal specificity value, the more specific rule is the one that counts.<\/li>\n<li>Rules with more specific selectors have a greater specificity.<\/li>\n<li>The last rule defined overrides any previous, conflicting rules.<\/li>\n<li>The embedded style sheet has a greater specificity than other rules.<\/li>\n<li>ID selectors have a higher specificity than attribute selectors.<\/li>\n<li>You should always try to use IDs to increase the specificity.<\/li>\n<li>A class selector beats any number of element selectors.<\/li>\n<li>The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.<\/li>\n<\/ul>\n<div><\/div>\n<div>It is shown in the figure as<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59571\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png\" alt=\"CSS Specificity-An Overview\" width=\"290\" height=\"260\" \/><\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Specificity is usually the reason why CSS-rules don\u2019t apply to some elements. Every selector has its place in the specificity hierarchy. If two selectors apply to the same element, the one with higher specificity wins. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1773],"class_list":["post-74094","page","type-page","status-publish","hentry","category-css3","tag-css-specificity-an-overview"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Specificity: An Overview - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Specificity: An Overview - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Specificity is usually the reason why CSS-rules don\u2019t apply to some elements. Every selector has its place in the specificity hierarchy. If two selectors apply to the same element, the one with higher specificity wins. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:17+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/\",\"name\":\"CSS Specificity: An Overview - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png\",\"datePublished\":\"2020-01-17T05:25:34+00:00\",\"dateModified\":\"2024-04-12T08:53:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Specificity: An Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Specificity: An Overview - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/","og_locale":"en_US","og_type":"article","og_title":"CSS Specificity: An Overview - Tutorial","og_description":"Specificity is usually the reason why CSS-rules don\u2019t apply to some elements. Every selector has its place in the specificity hierarchy. If two selectors apply to the same element, the one with higher specificity wins. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements....","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:17+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/","name":"CSS Specificity: An Overview - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png","datePublished":"2020-01-17T05:25:34+00:00","dateModified":"2024-04-12T08:53:17+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/CSS-Specificity-An-Overview.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-specificity-an-overview-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS Specificity: An Overview"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74094"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74094\/revisions"}],"predecessor-version":[{"id":85556,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74094\/revisions\/85556"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}