[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-specificity-explained":458},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,390,422],{"id":101,"name":366,"slug":367,"order_index":368,"topics":369},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[370,374,378,382,386],{"id":371,"title":372,"slug":373,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":375,"title":376,"slug":377,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":379,"title":380,"slug":381,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":383,"title":384,"slug":385,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":387,"title":388,"slug":389,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":113,"name":391,"slug":392,"order_index":368,"topics":393},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[394,398,402,406,410,414,418],{"id":395,"title":396,"slug":397,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":399,"title":400,"slug":401,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":403,"title":404,"slug":405,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":407,"title":408,"slug":409,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":411,"title":412,"slug":413,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":415,"title":416,"slug":417,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":419,"title":420,"slug":421,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":105,"name":423,"slug":424,"order_index":368,"topics":425},"Selectors & the Cascade","selectors-the-cascade",[426,430,434,438,442,446,450,454],{"id":427,"title":428,"slug":429,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":431,"title":432,"slug":433,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":435,"title":436,"slug":437,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":439,"title":440,"slug":441,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":443,"title":444,"slug":445,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":447,"title":448,"slug":449,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":451,"title":452,"slug":453,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":455,"title":456,"slug":457,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":459},{"id":451,"title":452,"slug":453,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":61,"cornerstone":52,"schema_type":469,"faq_json":5,"video_url":5,"canonical_url":470,"meta_title":471,"meta_description":472,"og_image":5,"toc_json":473,"code_examples":518,"quiz":535,"exercises":538,"published_at":5,"updated_at":553,"prev":554,"next":555},"\u003Ch2 id=\"what-is-css-specificity\">What Is CSS Specificity?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS specificity\u003C\u002Fstrong> is the algorithm browsers use to decide which rule wins when several rules target the same element and set the same property. If you ever wondered why your style is ignored, the answer is almost always specificity. Our focus keyword is \u003Cstrong>CSS specificity\u003C\u002Fstrong>, and along the way we cover trending questions: how to calculate CSS specificity, CSS specificity hierarchy, CSS specificity vs order, why is my CSS not working, CSS specificity calculator, and how @layer and :where() reduce specificity problems.\u003C\u002Fp>\u003Ch2 id=\"the-specificity-scoring-model\">The Specificity Scoring Model\u003C\u002Fh2>\u003Cp>Think of specificity as a three-part score written \u003Ccode>(A, B, C)\u003C\u002Fcode>. Compare the parts from left to right, and the first difference decides the winner. Never treat it as a decimal number: 11 classes never beat one ID.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Column\u003C\u002Fth>\u003Cth>Counts\u003C\u002Fth>\u003Cth>Examples\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>A\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>ID selectors\u003C\u002Ftd>\u003Ctd>\u003Ccode>#header\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>B\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>Class selectors, attribute selectors, pseudo-classes\u003C\u002Ftd>\u003Ctd>\u003Ccode>.card\u003C\u002Fcode>, \u003Ccode>[type='text']\u003C\u002Fcode>, \u003Ccode>:hover\u003C\u002Fcode>, \u003Ccode>:nth-child()\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>C\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>Type selectors and pseudo-elements\u003C\u002Ftd>\u003Ctd>\u003Ccode>div\u003C\u002Fcode>, \u003Ccode>p\u003C\u002Fcode>, \u003Ccode>::before\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>The universal selector \u003Ccode>*\u003C\u002Fcode> and combinators (\u003Ccode>+\u003C\u002Fcode>, \u003Ccode>>\u003C\u002Fcode>, \u003Ccode>~\u003C\u002Fcode>, and the space) add \u003Cstrong>nothing\u003C\u002Fstrong>. Inline styles (the \u003Ccode>style\u003C\u002Fcode> attribute) beat every selector-based rule, and \u003Ccode>!important\u003C\u002Fcode> sits in a different level of the cascade (covered in the next lesson).\u003C\u002Fp>\u003Ch2 id=\"worked-examples\">Worked Examples\u003C\u002Fh2>\u003Cpre>\u003Ccode>p                    \u002F* (0,0,1) *\u002F\np.intro             \u002F* (0,1,1) *\u002F\n#main p.intro       \u002F* (1,1,1) *\u002F\nul li a:hover       \u002F* (0,1,3) *\u002F\n.nav .item.active   \u002F* (0,3,0) *\u002F\n#a #b               \u002F* (2,0,0) *\u002F\n* {}                \u002F* (0,0,0) *\u002F\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Comparison: \u003Ccode>.a.b.c.d.e\u003C\u002Fcode> is \u003Ccode>(0,5,0)\u003C\u002Fcode>, and \u003Ccode>#x\u003C\u002Fcode> is \u003Ccode>(1,0,0)\u003C\u002Fcode>. The ID wins because column A is compared first.\u003C\u002Fp>\u003Ch2 id=\"what-happens-when-specificity-is-equal\">What Happens When Specificity Is Equal?\u003C\u002Fh2>\u003Cp>If two rules have identical specificity, the rule that appears \u003Cstrong>later\u003C\u002Fstrong> in the source order wins. This is why the order of your stylesheets matters, and why link order in HTML can change results.\u003C\u002Fp>\u003Ch2 id=\"functional-pseudo-classes-and-specificity\">Functional Pseudo-classes and Specificity\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>:is()\u003C\u002Fcode>, \u003Ccode>:not()\u003C\u002Fcode> and \u003Ccode>:has()\u003C\u002Fcode> take the specificity of their \u003Cstrong>most specific argument\u003C\u002Fstrong>. So \u003Ccode>:is(#a, .b)\u003C\u002Fcode> is \u003Ccode>(1,0,0)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>:where()\u003C\u002Fcode> always contributes \u003Cstrong>zero\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>\u003Ccode>:nth-child(2n+1 of .item)\u003C\u002Fcode> counts as one pseudo-class plus the most specific selector in the \u003Ccode>of\u003C\u002Fcode> list.\u003C\u002Fli>\u003Cli>With native CSS nesting, the \u003Ccode>&\u003C\u002Fcode> behaves like \u003Ccode>:is()\u003C\u002Fcode> of the parent selector list, so it inherits the parent's most specific selector.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-specificity-traps\">Common Specificity Traps\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Overusing IDs\u003C\u002Fstrong> for styling. They are hard to override later. Prefer classes.\u003C\u002Fli>\u003Cli>\u003Cstrong>Deep descendant chains\u003C\u002Fstrong> like \u003Ccode>.sidebar .widget ul li a\u003C\u002Fcode>. They are fragile and hard to override.\u003C\u002Fli>\u003Cli>\u003Cstrong>Inline styles\u003C\u002Fstrong> from JavaScript libraries, which can only be beaten by \u003Ccode>!important\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Third-party CSS\u003C\u002Fstrong> that uses high-specificity selectors.\u003C\u002Fli>\u003Cli>\u003Cstrong>Escalation by !important\u003C\u002Fstrong>, where each fix requires another \u003Ccode>!important\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"strategies-to-keep-specificity-low\">Strategies to Keep Specificity Low\u003C\u002Fh2>\u003Cul>\u003Cli>Use a single class for styling (BEM-style naming such as \u003Ccode>.card__title\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Avoid qualifying classes with element names, for example use \u003Ccode>.button\u003C\u002Fcode> not \u003Ccode>a.button\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Use \u003Ccode>:where()\u003C\u002Fcode> for base styles so components can override them easily.\u003C\u002Fli>\u003Cli>Use \u003Cstrong>cascade layers\u003C\u002Fstrong> (\u003Ccode>@layer\u003C\u002Fcode>) to control priority regardless of specificity between layers.\u003C\u002Fli>\u003Cli>Order your CSS from generic to specific: reset, base, layout, components, utilities.\u003C\u002Fli>\u003Cli>Increase specificity intentionally and minimally when needed, for example doubling a class: \u003Ccode>.btn.btn\u003C\u002Fcode> (a known hack, but layers are cleaner).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"debugging-specificity-in-devtools\">Debugging Specificity in DevTools\u003C\u002Fh2>\u003Col>\u003Cli>Right-click the element and choose Inspect.\u003C\u002Fli>\u003Cli>In the Styles panel, look for rules that are \u003Cstrong>struck through\u003C\u002Fstrong>. These lost the cascade.\u003C\u002Fli>\u003Cli>Hover over a selector to see its specificity in Chrome or Firefox tooltips.\u003C\u002Fli>\u003Cli>Check the Computed tab and click the arrow next to a property to see which rule provided the final value.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"specificity-cheat-sheet\">Specificity Cheat Sheet\u003C\u002Fh2>\u003Cpre>\u003Ccode>Inline style          > ID  >  class \u002F attribute \u002F pseudo-class  >  element \u002F pseudo-element\nEqual specificity     -> last rule in source order wins\n:where()              -> always 0\n:is() :not() :has()   -> most specific argument\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Write flat, low-specificity selectors and rely on source order and layers.\u003C\u002Fli>\u003Cli>Never fix a specificity problem by adding an ID or \u003Ccode>!important\u003C\u002Fcode> first.\u003C\u002Fli>\u003Cli>Document any intentional specificity boosts with a comment.\u003C\u002Fli>\u003Cli>Use a linter (Stylelint) with rules like \u003Ccode>selector-max-id\u003C\u002Fcode> and \u003Ccode>selector-max-specificity\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Specificity is just a scoring system: IDs, then classes, then elements, then source order. Keep it flat, understand how \u003Ccode>:is()\u003C\u002Fcode> and \u003Ccode>:where()\u003C\u002Fcode> behave, and use layers for scalable projects. Play with the examples below to see the winner change live.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  p { color: gray; }                 \u002F* (0,0,1) *\u002F\n  .note { color: blue; }             \u002F* (0,1,0) *\u002F\n  p.note { color: green; }           \u002F* (0,1,1) *\u002F\n  #special { color: red; }           \u002F* (1,0,0) *\u002F\n<\u002Fstyle>\n<p>Plain paragraph: gray<\u002Fp>\n<p class='note'>Class + element: green<\u002Fp>\n<p class='note' id='special'>ID wins: red<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .box { padding: 12px; background: lightyellow; font-family: sans-serif; }\n  .box { color: purple; }\n  .box { color: teal; }              \u002F* same specificity, later rule wins *\u002F\n<\u002Fstyle>\n<div class='box'>Teal wins because it appears later.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  :is(#app, .widget) p { color: crimson; }   \u002F* (1,0,1) because of #app *\u002F\n  :where(#app, .widget) span { color: crimson; } \u002F* (0,0,1) *\u002F\n  .override { color: dodgerblue; }\n<\u002Fstyle>\n<div class='widget'>\n  <p class='override'>Still crimson: :is() carries ID-level specificity<\u002Fp>\n  <span class='override'>Blue: :where() adds zero, so the class wins<\u002Fspan>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  \u002F* Fragile approach *\u002F\n  .sidebar .widget ul li a { color: red; }\n  \u002F* Cleaner approach with a single class *\u002F\n  .link { color: green; }\n<\u002Fstyle>\n<div class='sidebar'><div class='widget'><ul><li><a class='link' href='#'>Which color wins here?<\u002Fa><\u002Fli><\u002Ful><\u002Fdiv><\u002Fdiv>\n<p>The deep selector scores (0,2,3) and beats .link (0,1,0). Refactor to fix it.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer base, components;\n  @layer base { #page a { color: red; } }\n  @layer components { a { color: seagreen; } }\n<\u002Fstyle>\n<a href='#' style='font-family:sans-serif'>Layer order beats specificity between layers<\u002Fa>\n<div id='page' style='font-family:sans-serif'><a href='#'>Inside #page: the later layer wins, even with lower specificity<\u002Fa><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":423,"slug":424},{"slug":464,"display_name":465,"job_title":5,"short_bio":5,"expertise_tags":466,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":467,"posts":468},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-specificity-explained","CSS Specificity Explained: Calculate and Win Conflicts","Understand CSS specificity with the (0,0,0) scoring model, examples, common traps, :is\u002F:where\u002F:not behavior, and debugging tips.",[474,478,482,486,490,494,498,502,506,510,514],{"id":475,"text":476,"level":12,"children":477},"what-is-css-specificity","What Is CSS Specificity?",[],{"id":479,"text":480,"level":12,"children":481},"the-specificity-scoring-model","The Specificity Scoring Model",[],{"id":483,"text":484,"level":12,"children":485},"worked-examples","Worked Examples",[],{"id":487,"text":488,"level":12,"children":489},"what-happens-when-specificity-is-equal","What Happens When Specificity Is Equal?",[],{"id":491,"text":492,"level":12,"children":493},"functional-pseudo-classes-and-specificity","Functional Pseudo-classes and Specificity",[],{"id":495,"text":496,"level":12,"children":497},"common-specificity-traps","Common Specificity Traps",[],{"id":499,"text":500,"level":12,"children":501},"strategies-to-keep-specificity-low","Strategies to Keep Specificity Low",[],{"id":503,"text":504,"level":12,"children":505},"debugging-specificity-in-devtools","Debugging Specificity in DevTools",[],{"id":507,"text":508,"level":12,"children":509},"specificity-cheat-sheet","Specificity Cheat Sheet",[],{"id":511,"text":512,"level":12,"children":513},"best-practices","Best Practices",[],{"id":515,"text":516,"level":12,"children":517},"summary","Summary",[],[519,523,526,529,532],{"id":520,"language":16,"code":521,"is_editable":522},244,"\u003Cstyle>\n  p { color: gray; }                 \u002F* (0,0,1) *\u002F\n  .note { color: blue; }             \u002F* (0,1,0) *\u002F\n  p.note { color: green; }           \u002F* (0,1,1) *\u002F\n  #special { color: red; }           \u002F* (1,0,0) *\u002F\n\u003C\u002Fstyle>\n\u003Cp>Plain paragraph: gray\u003C\u002Fp>\n\u003Cp class='note'>Class + element: green\u003C\u002Fp>\n\u003Cp class='note' id='special'>ID wins: red\u003C\u002Fp>",true,{"id":524,"language":16,"code":525,"is_editable":522},245,"\u003Cstyle>\n  .box { padding: 12px; background: lightyellow; font-family: sans-serif; }\n  .box { color: purple; }\n  .box { color: teal; }              \u002F* same specificity, later rule wins *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>Teal wins because it appears later.\u003C\u002Fdiv>",{"id":527,"language":16,"code":528,"is_editable":522},246,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  :is(#app, .widget) p { color: crimson; }   \u002F* (1,0,1) because of #app *\u002F\n  :where(#app, .widget) span { color: crimson; } \u002F* (0,0,1) *\u002F\n  .override { color: dodgerblue; }\n\u003C\u002Fstyle>\n\u003Cdiv class='widget'>\n  \u003Cp class='override'>Still crimson: :is() carries ID-level specificity\u003C\u002Fp>\n  \u003Cspan class='override'>Blue: :where() adds zero, so the class wins\u003C\u002Fspan>\n\u003C\u002Fdiv>",{"id":530,"language":16,"code":531,"is_editable":522},247,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  \u002F* Fragile approach *\u002F\n  .sidebar .widget ul li a { color: red; }\n  \u002F* Cleaner approach with a single class *\u002F\n  .link { color: green; }\n\u003C\u002Fstyle>\n\u003Cdiv class='sidebar'>\u003Cdiv class='widget'>\u003Cul>\u003Cli>\u003Ca class='link' href='#'>Which color wins here?\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>The deep selector scores (0,2,3) and beats .link (0,1,0). Refactor to fix it.\u003C\u002Fp>",{"id":533,"language":16,"code":534,"is_editable":522},248,"\u003Cstyle>\n  @layer base, components;\n  @layer base { #page a { color: red; } }\n  @layer components { a { color: seagreen; } }\n\u003C\u002Fstyle>\n\u003Ca href='#' style='font-family:sans-serif'>Layer order beats specificity between layers\u003C\u002Fa>\n\u003Cdiv id='page' style='font-family:sans-serif'>\u003Ca href='#'>Inside #page: the later layer wins, even with lower specificity\u003C\u002Fa>\u003C\u002Fdiv>",{"id":193,"slug":536,"title":537,"time_limit_seconds":5,"pass_percentage":329,"question_count":65},"specificity-quiz","Specificity Quiz",[539,546],{"id":419,"title":540,"slug":541,"prompt":542,"starter_code":543,"expected_output":544,"language":545,"order_index":23},"Calculate the Specificity","calculate-specificity-scores","For each selector in the comment block, write its specificity as (A,B,C) in the console output by completing the object. Then explain which selector would win for a link with class 'nav-link' inside an element with id 'menu'.","\u002F\u002F Selectors:\n\u002F\u002F 1) a\n\u002F\u002F 2) .nav-link\n\u002F\u002F 3) #menu a\n\u002F\u002F 4) #menu .nav-link:hover\nconst scores = {\n  s1: '(?,?,?)',\n  s2: '(?,?,?)',\n  s3: '(?,?,?)',\n  s4: '(?,?,?)'\n};\nconsole.log(scores);","{ s1: '(0,0,1)', s2: '(0,1,0)', s3: '(1,0,1)', s4: '(1,2,0)' }","javascript",{"id":547,"title":548,"slug":549,"prompt":550,"starter_code":551,"expected_output":552,"language":16,"order_index":12},102,"Fix the Losing Rule Without !important","fix-losing-rule-without-important","The button should be green, but a more specific rule keeps it blue. Change ONLY the CSS (no !important, no inline styles, no IDs) so the button becomes green.","\u003Cstyle>\n  .toolbar button { background: dodgerblue; color: white; padding: 10px 18px; border: 0; }\n  .save { background: seagreen; }\n\u003C\u002Fstyle>\n\u003Cdiv class='toolbar'>\u003Cbutton class='save'>Save\u003C\u002Fbutton>\u003C\u002Fdiv>","The Save button has a green background.","2026-09-29T18:45:14+00:00",{"id":447,"slug":449,"title":448},{"id":455,"slug":457,"title":456}]