[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-pseudo-classes":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":439,"title":440,"slug":441,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":69,"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":554,"quiz":5,"exercises":583,"published_at":5,"updated_at":602,"prev":603,"next":604},"\u003Ch2 id=\"css-pseudo-classes-styling-elements-by-state-and-position\">CSS Pseudo-classes: Styling Elements by State and Position\u003C\u002Fh2>\u003Cp>A \u003Cstrong>CSS pseudo-class\u003C\u002Fstrong> is a keyword added to a selector, starting with a single colon, that targets an element in a specific \u003Cem>state\u003C\u002Fem> or \u003Cem>position\u003C\u002Fem>, such as when a user hovers a button, focuses an input, or when an element is the third item in a list. Pseudo-classes let you build interactive, dynamic designs with no JavaScript and no extra classes. This lesson covers \u003Ccode>:hover\u003C\u002Fcode>, \u003Ccode>:focus\u003C\u002Fcode> and \u003Ccode>:nth-child\u003C\u002Fcode> in depth, plus the most important modern pseudo-classes.\u003C\u002Fp>\u003Ch2 id=\"syntax\">Syntax\u003C\u002Fh2>\u003Cp>\u003Ccode>selector:pseudo-class { property: value; }\u003C\u002Fcode>, for example \u003Ccode>a:hover { color: red; }\u003C\u002Fcode>. Pseudo-classes use a \u003Cstrong>single colon\u003C\u002Fstrong>. Pseudo-elements (such as ::before and ::after) use a \u003Cstrong>double colon\u003C\u002Fstrong>.\u003C\u002Fp>\u003Ch2 id=\"pseudo-classes-have-class-level-specificity\">Pseudo-classes Have Class-Level Specificity\u003C\u002Fh2>\u003Cp>Each pseudo-class adds (0,1,0) to specificity, the same as a class. So \u003Ccode>a:hover\u003C\u002Fcode> scores (0,1,1). Exceptions: \u003Ccode>:where()\u003C\u002Fcode> adds zero, and \u003Ccode>:is()\u003C\u002Fcode>, \u003Ccode>:not()\u003C\u002Fcode> and \u003Ccode>:has()\u003C\u002Fcode> take the specificity of their most specific argument.\u003C\u002Fp>\u003Ch2 id=\"user-action-pseudo-classes\">User Action Pseudo-classes\u003C\u002Fh2>\u003Ch3 id=\"hover\">:hover\u003C\u002Fh3>\u003Cp>Applies while the pointer is over an element. Use it for buttons, links, cards and menus. On touch devices there is no true hover, so never hide essential content behind hover only. Wrap hover styling in \u003Ccode>@media (hover: hover)\u003C\u002Fcode> to apply it only on devices that really support it.\u003C\u002Fp>\u003Ch3 id=\"active\">:active\u003C\u002Fh3>\u003Cp>Applies while an element is being pressed (mouse down or tap). Great for button press feedback.\u003C\u002Fp>\u003Ch3 id=\"focus\">:focus\u003C\u002Fh3>\u003Cp>Applies when an element has keyboard or programmatic focus (links, buttons, inputs). Focus styles are essential for \u003Cstrong>accessibility\u003C\u002Fstrong>: keyboard users need to see where they are. Never write \u003Ccode>outline: none\u003C\u002Fcode> without providing a clear replacement.\u003C\u002Fp>\u003Ch3 id=\"focus-visible\">:focus-visible\u003C\u002Fh3>\u003Cp>Applies focus styles only when the browser decides a visible indicator is helpful, typically keyboard navigation. It stops the focus ring appearing on mouse clicks while keeping it for keyboard users. It is the recommended modern choice for buttons and links.\u003C\u002Fp>\u003Ch3 id=\"focus-within\">:focus-within\u003C\u002Fh3>\u003Cp>Matches a parent when any of its descendants has focus. Ideal for highlighting a whole form group or search bar when the input inside is focused.\u003C\u002Fp>\u003Ch2 id=\"link-pseudo-classes-and-the-lvha-order\">Link Pseudo-classes and the LVHA Order\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>:link\u003C\u002Fcode> - unvisited links.\u003C\u002Fli>\u003Cli>\u003Ccode>:visited\u003C\u002Fcode> - visited links (browsers only allow limited properties, mostly colors, for privacy).\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Because these have the same specificity, order matters. Remember \u003Cstrong>LVHA\u003C\u002Fstrong>: \u003Ccode>:link\u003C\u002Fcode>, \u003Ccode>:visited\u003C\u002Fcode>, \u003Ccode>:hover\u003C\u002Fcode>, \u003Ccode>:active\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"structural-pseudo-classes\">Structural Pseudo-classes\u003C\u002Fh2>\u003Ch3 id=\"first-child-and-last-child\">:first-child and :last-child\u003C\u002Fh3>\u003Cp>Match an element that is the first or last child of its parent. For example, \u003Ccode>li:last-child { border-bottom: none; }\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"only-child-first-of-type-last-of-type-nth-of-type\">:only-child, :first-of-type, :last-of-type, :nth-of-type()\u003C\u002Fh3>\u003Cp>The \u003Cem>-of-type\u003C\u002Fem> versions count only siblings of the same tag name, which is useful when an element mixes tags such as h2 and p.\u003C\u002Fp>\u003Ch3 id=\"nth-childanb\">:nth-child(an+b)\u003C\u002Fh3>\u003Cp>Selects elements by their position among all siblings. The argument can be a number, a keyword or a formula.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Selector\u003C\u002Fth>\u003Cth>Meaning\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>:nth-child(3)\u003C\u002Ftd>\u003Ctd>The third child\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(odd)\u003C\u002Ftd>\u003Ctd>1st, 3rd, 5th... (same as 2n+1)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(even)\u003C\u002Ftd>\u003Ctd>2nd, 4th, 6th... (same as 2n)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(3n)\u003C\u002Ftd>\u003Ctd>Every third child: 3, 6, 9...\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(3n+1)\u003C\u002Ftd>\u003Ctd>1, 4, 7, 10...\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(n+4)\u003C\u002Ftd>\u003Ctd>The fourth child and everything after it\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(-n+3)\u003C\u002Ftd>\u003Ctd>Only the first three children\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-last-child(2)\u003C\u002Ftd>\u003Ctd>Second from the end\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>:nth-child(2 of .item)\u003C\u002Ftd>\u003Ctd>The second child among those matching .item\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>In the formula \u003Ccode>an+b\u003C\u002Fcode>, \u003Cem>n\u003C\u002Fem> counts up from 0 (0, 1, 2, ...), \u003Cem>a\u003C\u002Fem> is the step and \u003Cem>b\u003C\u002Fem> is the offset. A classic use is zebra striping of tables and lists: \u003Ccode>tr:nth-child(even) { background: #f2f2f2; }\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"logical-functional-pseudo-classes\">Logical (Functional) Pseudo-classes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>:not(selector)\u003C\u002Fcode> - matches elements that do \u003Cem>not\u003C\u002Fem> match the argument. Example: \u003Ccode>li:not(:last-child)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>:is(a, b, c)\u003C\u002Fcode> - shorthand to group selectors. \u003Ccode>:is(h1, h2, h3):hover\u003C\u002Fcode> replaces three long selectors.\u003C\u002Fli>\u003Cli>\u003Ccode>:where(a, b, c)\u003C\u002Fcode> - same as :is() but with \u003Cstrong>zero specificity\u003C\u002Fstrong>, ideal for easily overridable defaults and resets.\u003C\u002Fli>\u003Cli>\u003Ccode>:has(selector)\u003C\u002Fcode> - the 'parent selector'. \u003Ccode>.card:has(img)\u003C\u002Fcode> selects cards that contain an image. It is one of the most exciting modern CSS features, and it is supported in current major browsers.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"form-and-input-state-pseudo-classes\">Form and Input State Pseudo-classes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>:checked\u003C\u002Fcode> - checked checkboxes and radios.\u003C\u002Fli>\u003Cli>\u003Ccode>:disabled\u003C\u002Fcode> and \u003Ccode>:enabled\u003C\u002Fcode> - form control state.\u003C\u002Fli>\u003Cli>\u003Ccode>:required\u003C\u002Fcode> and \u003Ccode>:optional\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>:valid\u003C\u002Fcode> and \u003Ccode>:invalid\u003C\u002Fcode> - based on HTML validation. Combine with :user-invalid, where supported, to avoid showing errors before the user has interacted.\u003C\u002Fli>\u003Cli>\u003Ccode>:placeholder-shown\u003C\u002Fcode> - an input whose placeholder is currently visible.\u003C\u002Fli>\u003Cli>\u003Ccode>:read-only\u003C\u002Fcode> and \u003Ccode>:read-write\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"other-useful-pseudo-classes\">Other Useful Pseudo-classes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>:root\u003C\u002Fcode> - the html element, the standard place to define CSS variables.\u003C\u002Fli>\u003Cli>\u003Ccode>:empty\u003C\u002Fcode> - elements with no children or text.\u003C\u002Fli>\u003Cli>\u003Ccode>:target\u003C\u002Fcode> - the element whose id matches the URL hash (for example #section2).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Always pair \u003Ccode>:hover\u003C\u002Fcode> styles with matching \u003Ccode>:focus-visible\u003C\u002Fcode> styles so keyboard users get the same feedback.\u003C\u002Fli>\u003Cli>Use \u003Ccode>transition\u003C\u002Fcode> to make hover and focus changes smooth.\u003C\u002Fli>\u003Cli>Avoid removing default focus outlines unless you replace them with something at least as visible.\u003C\u002Fli>\u003Cli>Use \u003Ccode>:where()\u003C\u002Fcode> for low-specificity base styles.\u003C\u002Fli>\u003Cli>Do not hide important information behind hover only.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Putting a space before the colon: \u003Ccode>a :hover\u003C\u002Fcode> means 'any hovered descendant of a', not 'a hovered link'.\u003C\u002Fli>\u003Cli>Writing link states in the wrong order, so :hover never appears to work.\u003C\u002Fli>\u003Cli>Forgetting that \u003Ccode>:nth-child\u003C\u002Fcode> counts \u003Cem>all\u003C\u002Fem> siblings, not only elements of the same type.\u003C\u002Fli>\u003Cli>Starting the count at 0: nth-child counts from 1.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Pseudo-classes target state (:hover, :focus, :checked) and position (:nth-child, :first-child).\u003C\u002Fli>\u003Cli>Use :focus-visible for accessible keyboard focus and :focus-within for grouped highlighting.\u003C\u002Fli>\u003Cli>:nth-child(an+b) unlocks striping, grids and ranges.\u003C\u002Fli>\u003Cli>:is(), :where(), :not() and :has() are powerful modern tools for cleaner, smarter CSS.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .btn {\n    padding: 12px 24px;\n    background: #2563eb;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n  }\n  .btn:hover { background: #1d4ed8; }\n  .btn:active { transform: scale(0.96); }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n<\u002Fstyle>\n<button class='btn'>Hover, click and Tab to me<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  input { padding: 10px; border: 2px solid #ccc; border-radius: 6px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }\n  input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }\n  .field { padding: 12px; border: 2px solid transparent; border-radius: 8px; font-family: sans-serif; }\n  .field:focus-within { border-color: #10b981; background: #ecfdf5; }\n<\u002Fstyle>\n<div class='field'>\n  <label>Name: <\u002Flabel>\n  <input type='text' placeholder='Click me'>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  a { font-family: sans-serif; font-size: 20px; }\n  a:link { color: #2563eb; }\n  a:visited { color: #7c3aed; }\n  a:hover { color: #db2777; text-decoration: none; }\n  a:active { color: #dc2626; }\n<\u002Fstyle>\n<a href='#demo'>LVHA order link<\u002Fa>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  table { border-collapse: collapse; width: 100%; font-family: sans-serif; }\n  th, td { padding: 10px; text-align: left; }\n  tbody tr:nth-child(odd) { background: #f8fafc; }\n  tbody tr:nth-child(even) { background: #e2e8f0; }\n  tbody tr:hover { background: #fde68a; }\n<\u002Fstyle>\n<table>\n  <thead><tr><th>Name<\u002Fth><th>Role<\u002Fth><\u002Ftr><\u002Fthead>\n  <tbody>\n    <tr><td>Ali<\u002Ftd><td>Designer<\u002Ftd><\u002Ftr>\n    <tr><td>Sara<\u002Ftd><td>Developer<\u002Ftd><\u002Ftr>\n    <tr><td>Omar<\u002Ftd><td>Manager<\u002Ftd><\u002Ftr>\n    <tr><td>Hina<\u002Ftd><td>Tester<\u002Ftd><\u002Ftr>\n  <\u002Ftbody>\n<\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  ul { font-family: sans-serif; list-style: none; padding: 0; }\n  li { padding: 10px; background: #f1f5f9; margin-bottom: 4px; }\n  li:first-child { border-radius: 8px 8px 0 0; font-weight: bold; }\n  li:last-child { border-radius: 0 0 8px 8px; }\n  li:nth-child(3n) { background: #bfdbfe; }        \u002F* 3, 6, 9... *\u002F\n  li:nth-child(-n+2) { color: #b91c1c; }           \u002F* first two only *\u002F\n  li:nth-child(n+7) { opacity: 0.5; }              \u002F* 7th onward *\u002F\n<\u002Fstyle>\n<ul>\n  <li>1<\u002Fli><li>2<\u002Fli><li>3<\u002Fli><li>4<\u002Fli><li>5<\u002Fli>\n  <li>6<\u002Fli><li>7<\u002Fli><li>8<\u002Fli><li>9<\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .menu { display: flex; gap: 0; list-style: none; padding: 0; font-family: sans-serif; }\n  .menu li:not(:last-child) { border-right: 2px solid #94a3b8; padding-right: 14px; margin-right: 14px; }\n  :is(h1, h2, h3):hover { color: #db2777; }\n  :where(.note) { color: #64748b; }   \u002F* zero specificity, easy to override *\u002F\n<\u002Fstyle>\n<ul class='menu'><li>Home<\u002Fli><li>Blog<\u002Fli><li>Contact<\u002Fli><\u002Ful>\n<h2>Hover this heading<\u002Fh2>\n<p class='note'>Low-specificity default note color.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .card { border: 2px solid #cbd5e1; padding: 12px; margin: 10px 0; max-width: 300px; font-family: sans-serif; }\n  .card:has(img) { border-color: #2563eb; background: #eff6ff; }\n  .card:has(.badge) { box-shadow: 0 0 0 4px #fde68a; }\n  .badge { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }\n  .placeholder { display: inline-block; width: 60px; height: 40px; background: #93c5fd; }\n<\u002Fstyle>\n<div class='card'><p>Plain card<\u002Fp><\u002Fdiv>\n<div class='card'><span class='placeholder'><\u002Fspan><p>Card with a picture box (only real img tags trigger :has(img) in production)<\u002Fp><\u002Fdiv>\n<div class='card'><span class='badge'>New<\u002Fspan><p>Card with a badge<\u002Fp><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  input { padding: 10px; border: 2px solid #cbd5e1; border-radius: 6px; margin: 6px 0; display: block; }\n  input:required { border-left: 5px solid #f59e0b; }\n  input:valid { border-color: #22c55e; }\n  input:invalid:not(:placeholder-shown) { border-color: #ef4444; background: #fef2f2; }\n  input:disabled { background: #e5e7eb; cursor: not-allowed; }\n  input:checked + label { font-weight: bold; color: #2563eb; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<input type='email' placeholder='Email (required)' required>\n<input type='text' placeholder='Disabled field' disabled>\n<input type='checkbox' id='agree'><label for='agree'>I agree<\u002Flabel>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @media (hover: hover) {\n    .tile:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }\n  }\n  .tile { padding: 24px; background: #fef3c7; width: 200px; font-family: sans-serif; transition: transform 0.2s, box-shadow 0.2s; }\n  .tile:focus-visible { outline: 3px solid #2563eb; }\n<\u002Fstyle>\n<div class='tile' tabindex='0'>Hover-capable devices lift this tile. Keyboard users get a focus ring.<\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-pseudo-classes","CSS Pseudo-classes: :hover, :focus, :nth-child, :has()","Learn CSS pseudo-classes: :hover, :focus, :focus-visible, :nth-child, :not, :is, :where and :has() with live examples, specificity and accessibility tips.",[474,478,482,486,510,514,530,534,538,542,546,550],{"id":475,"text":476,"level":12,"children":477},"css-pseudo-classes-styling-elements-by-state-and-position","CSS Pseudo-classes: Styling Elements by State and Position",[],{"id":479,"text":480,"level":12,"children":481},"syntax","Syntax",[],{"id":483,"text":484,"level":12,"children":485},"pseudo-classes-have-class-level-specificity","Pseudo-classes Have Class-Level Specificity",[],{"id":487,"text":488,"level":12,"children":489},"user-action-pseudo-classes","User Action Pseudo-classes",[490,494,498,502,506],{"id":491,"text":492,"level":57,"children":493},"hover",":hover",[],{"id":495,"text":496,"level":57,"children":497},"active",":active",[],{"id":499,"text":500,"level":57,"children":501},"focus",":focus",[],{"id":503,"text":504,"level":57,"children":505},"focus-visible",":focus-visible",[],{"id":507,"text":508,"level":57,"children":509},"focus-within",":focus-within",[],{"id":511,"text":512,"level":12,"children":513},"link-pseudo-classes-and-the-lvha-order","Link Pseudo-classes and the LVHA Order",[],{"id":515,"text":516,"level":12,"children":517},"structural-pseudo-classes","Structural Pseudo-classes",[518,522,526],{"id":519,"text":520,"level":57,"children":521},"first-child-and-last-child",":first-child and :last-child",[],{"id":523,"text":524,"level":57,"children":525},"only-child-first-of-type-last-of-type-nth-of-type",":only-child, :first-of-type, :last-of-type, :nth-of-type()",[],{"id":527,"text":528,"level":57,"children":529},"nth-childanb",":nth-child(an+b)",[],{"id":531,"text":532,"level":12,"children":533},"logical-functional-pseudo-classes","Logical (Functional) Pseudo-classes",[],{"id":535,"text":536,"level":12,"children":537},"form-and-input-state-pseudo-classes","Form and Input State Pseudo-classes",[],{"id":539,"text":540,"level":12,"children":541},"other-useful-pseudo-classes","Other Useful Pseudo-classes",[],{"id":543,"text":544,"level":12,"children":545},"best-practices","Best Practices",[],{"id":547,"text":548,"level":12,"children":549},"common-mistakes","Common Mistakes",[],{"id":551,"text":552,"level":12,"children":553},"key-takeaways","Key Takeaways",[],[555,559,562,565,568,571,574,577,580],{"id":556,"language":16,"code":557,"is_editable":558},225,"\u003Cstyle>\n  .btn {\n    padding: 12px 24px;\n    background: #2563eb;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n  }\n  .btn:hover { background: #1d4ed8; }\n  .btn:active { transform: scale(0.96); }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Hover, click and Tab to me\u003C\u002Fbutton>",true,{"id":560,"language":16,"code":561,"is_editable":558},226,"\u003Cstyle>\n  input { padding: 10px; border: 2px solid #ccc; border-radius: 6px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }\n  input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }\n  .field { padding: 12px; border: 2px solid transparent; border-radius: 8px; font-family: sans-serif; }\n  .field:focus-within { border-color: #10b981; background: #ecfdf5; }\n\u003C\u002Fstyle>\n\u003Cdiv class='field'>\n  \u003Clabel>Name: \u003C\u002Flabel>\n  \u003Cinput type='text' placeholder='Click me'>\n\u003C\u002Fdiv>",{"id":563,"language":16,"code":564,"is_editable":558},227,"\u003Cstyle>\n  a { font-family: sans-serif; font-size: 20px; }\n  a:link { color: #2563eb; }\n  a:visited { color: #7c3aed; }\n  a:hover { color: #db2777; text-decoration: none; }\n  a:active { color: #dc2626; }\n\u003C\u002Fstyle>\n\u003Ca href='#demo'>LVHA order link\u003C\u002Fa>",{"id":566,"language":16,"code":567,"is_editable":558},228,"\u003Cstyle>\n  table { border-collapse: collapse; width: 100%; font-family: sans-serif; }\n  th, td { padding: 10px; text-align: left; }\n  tbody tr:nth-child(odd) { background: #f8fafc; }\n  tbody tr:nth-child(even) { background: #e2e8f0; }\n  tbody tr:hover { background: #fde68a; }\n\u003C\u002Fstyle>\n\u003Ctable>\n  \u003Cthead>\u003Ctr>\u003Cth>Name\u003C\u002Fth>\u003Cth>Role\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Ctd>Ali\u003C\u002Ftd>\u003Ctd>Designer\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Sara\u003C\u002Ftd>\u003Ctd>Developer\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Omar\u003C\u002Ftd>\u003Ctd>Manager\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>Hina\u003C\u002Ftd>\u003Ctd>Tester\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>",{"id":569,"language":16,"code":570,"is_editable":558},229,"\u003Cstyle>\n  ul { font-family: sans-serif; list-style: none; padding: 0; }\n  li { padding: 10px; background: #f1f5f9; margin-bottom: 4px; }\n  li:first-child { border-radius: 8px 8px 0 0; font-weight: bold; }\n  li:last-child { border-radius: 0 0 8px 8px; }\n  li:nth-child(3n) { background: #bfdbfe; }        \u002F* 3, 6, 9... *\u002F\n  li:nth-child(-n+2) { color: #b91c1c; }           \u002F* first two only *\u002F\n  li:nth-child(n+7) { opacity: 0.5; }              \u002F* 7th onward *\u002F\n\u003C\u002Fstyle>\n\u003Cul>\n  \u003Cli>1\u003C\u002Fli>\u003Cli>2\u003C\u002Fli>\u003Cli>3\u003C\u002Fli>\u003Cli>4\u003C\u002Fli>\u003Cli>5\u003C\u002Fli>\n  \u003Cli>6\u003C\u002Fli>\u003Cli>7\u003C\u002Fli>\u003Cli>8\u003C\u002Fli>\u003Cli>9\u003C\u002Fli>\n\u003C\u002Ful>",{"id":572,"language":16,"code":573,"is_editable":558},230,"\u003Cstyle>\n  .menu { display: flex; gap: 0; list-style: none; padding: 0; font-family: sans-serif; }\n  .menu li:not(:last-child) { border-right: 2px solid #94a3b8; padding-right: 14px; margin-right: 14px; }\n  :is(h1, h2, h3):hover { color: #db2777; }\n  :where(.note) { color: #64748b; }   \u002F* zero specificity, easy to override *\u002F\n\u003C\u002Fstyle>\n\u003Cul class='menu'>\u003Cli>Home\u003C\u002Fli>\u003Cli>Blog\u003C\u002Fli>\u003Cli>Contact\u003C\u002Fli>\u003C\u002Ful>\n\u003Ch2>Hover this heading\u003C\u002Fh2>\n\u003Cp class='note'>Low-specificity default note color.\u003C\u002Fp>",{"id":575,"language":16,"code":576,"is_editable":558},231,"\u003Cstyle>\n  .card { border: 2px solid #cbd5e1; padding: 12px; margin: 10px 0; max-width: 300px; font-family: sans-serif; }\n  .card:has(img) { border-color: #2563eb; background: #eff6ff; }\n  .card:has(.badge) { box-shadow: 0 0 0 4px #fde68a; }\n  .badge { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }\n  .placeholder { display: inline-block; width: 60px; height: 40px; background: #93c5fd; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Cp>Plain card\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='card'>\u003Cspan class='placeholder'>\u003C\u002Fspan>\u003Cp>Card with a picture box (only real img tags trigger :has(img) in production)\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='card'>\u003Cspan class='badge'>New\u003C\u002Fspan>\u003Cp>Card with a badge\u003C\u002Fp>\u003C\u002Fdiv>",{"id":578,"language":16,"code":579,"is_editable":558},232,"\u003Cstyle>\n  input { padding: 10px; border: 2px solid #cbd5e1; border-radius: 6px; margin: 6px 0; display: block; }\n  input:required { border-left: 5px solid #f59e0b; }\n  input:valid { border-color: #22c55e; }\n  input:invalid:not(:placeholder-shown) { border-color: #ef4444; background: #fef2f2; }\n  input:disabled { background: #e5e7eb; cursor: not-allowed; }\n  input:checked + label { font-weight: bold; color: #2563eb; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cinput type='email' placeholder='Email (required)' required>\n\u003Cinput type='text' placeholder='Disabled field' disabled>\n\u003Cinput type='checkbox' id='agree'>\u003Clabel for='agree'>I agree\u003C\u002Flabel>",{"id":581,"language":16,"code":582,"is_editable":558},233,"\u003Cstyle>\n  @media (hover: hover) {\n    .tile:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }\n  }\n  .tile { padding: 24px; background: #fef3c7; width: 200px; font-family: sans-serif; transition: transform 0.2s, box-shadow 0.2s; }\n  .tile:focus-visible { outline: 3px solid #2563eb; }\n\u003C\u002Fstyle>\n\u003Cdiv class='tile' tabindex='0'>Hover-capable devices lift this tile. Keyboard users get a focus ring.\u003C\u002Fdiv>",[584,590,596],{"id":455,"title":585,"slug":586,"prompt":587,"starter_code":588,"expected_output":589,"language":16,"order_index":23},"Interactive Button States","interactive-button-states","Style the button: on :hover change the background to darkgreen, on :active scale it down slightly with transform: scale(0.95), and on :focus-visible add a 3px solid orange outline with a 3px offset. Add a transition for smooth changes.","\u003Cstyle>\n  .go {\n    padding: 12px 24px;\n    background: green;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 16px;\n  }\n  \u002F* Add pseudo-class rules below *\u002F\n\u003C\u002Fstyle>\n\u003Cbutton class='go'>Go\u003C\u002Fbutton>","Darker green on hover, scaled on press, orange outline on keyboard focus, smooth transition.",{"id":395,"title":591,"slug":592,"prompt":593,"starter_code":594,"expected_output":595,"language":16,"order_index":12},"Zebra Stripes and Ranges with nth-child","zebra-stripes-and-ranges-with-nth-child","Use :nth-child to (1) give even list items a light gray background, (2) make only the first three items bold, and (3) make every item from the 6th onward semi-transparent (opacity 0.5).","\u003Cstyle>\n  li { padding: 8px; list-style: none; font-family: sans-serif; }\n  \u002F* Your nth-child rules here *\u002F\n\u003C\u002Fstyle>\n\u003Cul>\n  \u003Cli>One\u003C\u002Fli>\u003Cli>Two\u003C\u002Fli>\u003Cli>Three\u003C\u002Fli>\u003Cli>Four\u003C\u002Fli>\n  \u003Cli>Five\u003C\u002Fli>\u003Cli>Six\u003C\u002Fli>\u003Cli>Seven\u003C\u002Fli>\u003Cli>Eight\u003C\u002Fli>\n\u003C\u002Ful>","li:nth-child(even) { background: #eee; } li:nth-child(-n+3) { font-weight: bold; } li:nth-child(n+6) { opacity: 0.5; }",{"id":399,"title":597,"slug":598,"prompt":599,"starter_code":600,"expected_output":601,"language":16,"order_index":57},"Highlight the Form Group","highlight-the-form-group","Use :focus-within so that the whole .group wrapper gets a blue border and a light blue background when the input inside is focused. Then use :not(:last-child) to add a bottom margin of 12px to every group except the last.","\u003Cstyle>\n  .group { padding: 10px; border: 2px solid transparent; font-family: sans-serif; }\n  \u002F* Your rules here *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='group'>\u003Clabel>First name \u003C\u002Flabel>\u003Cinput type='text'>\u003C\u002Fdiv>\n\u003Cdiv class='group'>\u003Clabel>Last name \u003C\u002Flabel>\u003Cinput type='text'>\u003C\u002Fdiv>",".group:focus-within { border-color: blue; background: #e6f0ff; } .group:not(:last-child) { margin-bottom: 12px; }","2026-09-29T18:33:20+00:00",{"id":435,"slug":437,"title":436},{"id":443,"slug":445,"title":444}]