[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:css-combinators":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,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","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",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","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.",[341,366,398],{"id":75,"name":342,"slug":343,"order_index":344,"topics":345},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[346,350,354,358,362],{"id":347,"title":348,"slug":349,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":351,"title":352,"slug":353,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":355,"title":356,"slug":357,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":359,"title":360,"slug":361,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":363,"title":364,"slug":365,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":87,"name":367,"slug":368,"order_index":344,"topics":369},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[370,374,378,382,386,390,394],{"id":371,"title":372,"slug":373,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":375,"title":376,"slug":377,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":379,"title":380,"slug":381,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":383,"title":384,"slug":385,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":387,"title":388,"slug":389,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":391,"title":392,"slug":393,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":395,"title":396,"slug":397,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":79,"name":399,"slug":400,"order_index":344,"topics":401},"Selectors & the Cascade","selectors-the-cascade",[402,406,410,414,418,422,426,430],{"id":403,"title":404,"slug":405,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":407,"title":408,"slug":409,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":411,"title":412,"slug":413,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":415,"title":416,"slug":417,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":419,"title":420,"slug":421,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":423,"title":424,"slug":425,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":427,"title":428,"slug":429,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":431,"title":432,"slug":433,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":435},[436,439,443,448,453],{"name":335,"slug":336,"description":437,"post_count":23,"subcategories":438},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":440,"description":441,"post_count":23,"subcategories":442},"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":444,"slug":445,"description":446,"post_count":9,"subcategories":447},"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.",[],{"name":449,"slug":450,"description":451,"post_count":9,"subcategories":452},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":454,"slug":455,"description":456,"post_count":9,"subcategories":457},"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":459},{"id":407,"title":408,"slug":409,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":35,"cornerstone":26,"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":526,"quiz":5,"exercises":546,"published_at":5,"updated_at":559,"prev":560,"next":561},"\u003Ch2 id=\"css-combinators-selecting-elements-by-relationship\">CSS Combinators: Selecting Elements by Relationship\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS combinators\u003C\u002Fstrong> let you select elements based on their \u003Cem>relationship\u003C\u002Fem> in the HTML tree: parent, child, ancestor, descendant and sibling. Instead of adding classes to every element, combinators let you style structure precisely. There are four main combinators: the \u003Cstrong>descendant\u003C\u002Fstrong> (space), the \u003Cstrong>child\u003C\u002Fstrong> (>), the \u003Cstrong>adjacent sibling\u003C\u002Fstrong> (+) and the \u003Cstrong>general sibling\u003C\u002Fstrong> (~).\u003C\u002Fp>\u003Ch2 id=\"understanding-the-dom-family-tree\">Understanding the DOM Family Tree\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Parent\u003C\u002Fstrong> - an element directly containing another.\u003C\u002Fli>\u003Cli>\u003Cstrong>Child\u003C\u002Fstrong> - an element directly inside a parent.\u003C\u002Fli>\u003Cli>\u003Cstrong>Ancestor\u003C\u002Fstrong> - a parent, grandparent and so on, up the tree.\u003C\u002Fli>\u003Cli>\u003Cstrong>Descendant\u003C\u002Fstrong> - a child, grandchild and so on, down the tree.\u003C\u002Fli>\u003Cli>\u003Cstrong>Siblings\u003C\u002Fstrong> - elements that share the same parent.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"1-descendant-combinator-space\">1. Descendant Combinator (Space)\u003C\u002Fh2>\u003Cp>Syntax: \u003Ccode>ancestor descendant\u003C\u002Fcode>. It matches the second element anywhere inside the first, no matter how deeply nested.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>nav a\u003C\u002Fcode> matches every link inside a nav, even links inside nested lists.\u003C\u002Fli>\u003Cli>It is the most common combinator, but also the easiest to overuse because it can match more than you intend.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-child-combinator\">2. Child Combinator (>)\u003C\u002Fh2>\u003Cp>Syntax: \u003Ccode>parent > child\u003C\u002Fcode>. It matches only \u003Cem>direct\u003C\u002Fem> children, not grandchildren.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>ul > li\u003C\u002Fcode> selects only the list items of that list, not the items in nested lists.\u003C\u002Fli>\u003Cli>Use it for precision and to avoid unwanted inheritance in nested components such as menus.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-adjacent-sibling-combinator\">3. Adjacent Sibling Combinator (+)\u003C\u002Fh2>\u003Cp>Syntax: \u003Ccode>first + second\u003C\u002Fcode>. It matches the second element only if it comes \u003Cem>immediately after\u003C\u002Fem> the first, and both share the same parent.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>h2 + p\u003C\u002Fcode> selects the first paragraph directly after each h2.\u003C\u002Fli>\u003Cli>Classic use: spacing rules, such as \u003Ccode>.item + .item { margin-top: 1rem; }\u003C\u002Fcode> (a lightweight alternative to adding margins to the last child).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-general-sibling-combinator\">4. General Sibling Combinator (~)\u003C\u002Fh2>\u003Cp>Syntax: \u003Ccode>first ~ second\u003C\u002Fcode>. It matches every following sibling of the first element, not only the next one.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>h2 ~ p\u003C\u002Fcode> selects all paragraphs that follow an h2 within the same parent.\u003C\u002Fli>\u003Cli>Famous use: the checkbox hack, \u003Ccode>input:checked ~ .menu { display: block; }\u003C\u002Fcode>, which toggles UI with no JavaScript.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"important-limitation-css-looks-forward-only\">Important Limitation: CSS Looks Forward Only\u003C\u002Fh2>\u003Cp>Sibling combinators only select elements \u003Cem>after\u003C\u002Fem> the reference element in the source order. Traditionally CSS could not select a parent or previous sibling. The modern \u003Ccode>:has()\u003C\u002Fcode> pseudo-class now makes this possible, for example \u003Ccode>li:has(+ li.active)\u003C\u002Fcode> (see the pseudo-classes lesson).\u003C\u002Fp>\u003Ch2 id=\"comparison-table\">Comparison Table\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Combinator\u003C\u002Fth>\u003Cth>Symbol\u003C\u002Fth>\u003Cth>Example\u003C\u002Fth>\u003Cth>Matches\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Descendant\u003C\u002Ftd>\u003Ctd>space\u003C\u002Ftd>\u003Ctd>div p\u003C\u002Ftd>\u003Ctd>Any p inside div, at any depth\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Child\u003C\u002Ftd>\u003Ctd>>\u003C\u002Ftd>\u003Ctd>div > p\u003C\u002Ftd>\u003Ctd>p that is a direct child of div\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Adjacent sibling\u003C\u002Ftd>\u003Ctd>+\u003C\u002Ftd>\u003Ctd>h2 + p\u003C\u002Ftd>\u003Ctd>The p immediately after h2\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>General sibling\u003C\u002Ftd>\u003Ctd>~\u003C\u002Ftd>\u003Ctd>h2 ~ p\u003C\u002Ftd>\u003Ctd>All following p siblings of h2\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"specificity-of-combinators\">Specificity of Combinators\u003C\u002Fh2>\u003Cp>Combinators themselves add no specificity. The score comes from the selectors they connect. So \u003Ccode>nav a\u003C\u002Fcode> is (0,0,2), while \u003Ccode>.nav > .link\u003C\u002Fcode> is (0,2,0). Long chains raise specificity and make styles harder to override, so keep chains short (2 to 3 parts is usually enough).\u003C\u002Fp>\u003Ch2 id=\"combining-with-other-selectors\">Combining with Other Selectors\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>.card > h3 + p\u003C\u002Fcode> selects the paragraph right after an h3 that is a direct child of .card.\u003C\u002Fli>\u003Cli>\u003Ccode>.menu li:not(:last-child)\u003C\u002Fcode> adds a divider to every item except the last.\u003C\u002Fli>\u003Cli>\u003Ccode>form label + input\u003C\u002Fcode> styles the input right after a label.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"performance-and-maintainability\">Performance and Maintainability\u003C\u002Fh2>\u003Cp>Modern browsers match selectors right to left and handle combinators efficiently, so performance is rarely an issue. The bigger concern is maintainability: deeply nested selectors like \u003Ccode>body div.main ul li a span\u003C\u002Fcode> are brittle. If your HTML changes, the CSS breaks. Prefer a class on the element when the chain gets long. Native CSS nesting can also help you group related rules clearly.\u003C\u002Fp>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Confusing the descendant space with a compound selector (\u003Ccode>.a .b\u003C\u002Fcode> is not \u003Ccode>.a.b\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>+\u003C\u002Fcode> to work for elements that are not immediate siblings, such as when a wrapper element sits in between.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>~\u003C\u002Fcode> to select previous siblings.\u003C\u002Fli>\u003Cli>Writing overly long selector chains with high specificity.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Descendant (space) = any depth; child (>) = direct children only.\u003C\u002Fli>\u003Cli>Adjacent (+) = the very next sibling; general (~) = all following siblings.\u003C\u002Fli>\u003Cli>Combinators add no specificity themselves, but chains do accumulate it.\u003C\u002Fli>\u003Cli>Keep chains short and use classes for clarity.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .article p { color: #2c3e50; }              \u002F* descendant: any depth *\u002F\n  .article > p { font-weight: bold; }          \u002F* child: direct children only *\u002F\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<div class='article'>\n  <p>Direct child paragraph (bold and dark).<\u002Fp>\n  <blockquote>\n    <p>Nested paragraph (dark, but NOT bold).<\u002Fp>\n  <\u002Fblockquote>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  ul > li { color: #8e44ad; }\n  ul ul > li { color: #16a085; }\n<\u002Fstyle>\n<ul>\n  <li>Top level item<\u002Fli>\n  <li>Top level with nested list\n    <ul>\n      <li>Nested item<\u002Fli>\n      <li>Nested item<\u002Fli>\n    <\u002Ful>\n  <\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  h2 + p { font-size: 20px; color: #c0392b; }   \u002F* only the paragraph right after h2 *\u002F\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<h2>Lead paragraph below<\u002Fh2>\n<p>I am immediately after the h2, so I am larger and red.<\u002Fp>\n<p>I am a normal paragraph.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  h2 ~ p { border-left: 4px solid #2980b9; padding-left: 10px; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<p>Before the h2: not styled.<\u002Fp>\n<h2>Heading<\u002Fh2>\n<p>Sibling one (styled).<\u002Fp>\n<div>Some other element<\u002Fdiv>\n<p>Sibling two (styled too).<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .item { padding: 12px; background: #ecf0f1; font-family: sans-serif; }\n  .item + .item { margin-top: 8px; border-top: 2px solid #bdc3c7; }\n<\u002Fstyle>\n<div class='item'>First<\u002Fdiv>\n<div class='item'>Second<\u002Fdiv>\n<div class='item'>Third<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .toggle-menu { display: none; padding: 10px; background: #e8f8f5; }\n  #menu-check:checked ~ .toggle-menu { display: block; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<input type='checkbox' id='menu-check'>\n<label for='menu-check'>Toggle menu<\u002Flabel>\n<div class='toggle-menu'>Menu content shown with the sibling combinator and :checked (no JavaScript).<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":399,"slug":400},{"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-combinators","CSS Combinators: Descendant, Child, Sibling Selectors","Master CSS combinators: descendant, child (>), adjacent sibling (+) and general sibling (~) selectors with examples, specificity and best practices.",[474,478,482,486,490,494,498,502,506,510,514,518,522],{"id":475,"text":476,"level":23,"children":477},"css-combinators-selecting-elements-by-relationship","CSS Combinators: Selecting Elements by Relationship",[],{"id":479,"text":480,"level":23,"children":481},"understanding-the-dom-family-tree","Understanding the DOM Family Tree",[],{"id":483,"text":484,"level":23,"children":485},"1-descendant-combinator-space","1. Descendant Combinator (Space)",[],{"id":487,"text":488,"level":23,"children":489},"2-child-combinator","2. Child Combinator (>)",[],{"id":491,"text":492,"level":23,"children":493},"3-adjacent-sibling-combinator","3. Adjacent Sibling Combinator (+)",[],{"id":495,"text":496,"level":23,"children":497},"4-general-sibling-combinator","4. General Sibling Combinator (~)",[],{"id":499,"text":500,"level":23,"children":501},"important-limitation-css-looks-forward-only","Important Limitation: CSS Looks Forward Only",[],{"id":503,"text":504,"level":23,"children":505},"comparison-table","Comparison Table",[],{"id":507,"text":508,"level":23,"children":509},"specificity-of-combinators","Specificity of Combinators",[],{"id":511,"text":512,"level":23,"children":513},"combining-with-other-selectors","Combining with Other Selectors",[],{"id":515,"text":516,"level":23,"children":517},"performance-and-maintainability","Performance and Maintainability",[],{"id":519,"text":520,"level":23,"children":521},"common-mistakes","Common Mistakes",[],{"id":523,"text":524,"level":23,"children":525},"key-takeaways","Key Takeaways",[],[527,531,534,537,540,543],{"id":528,"language":440,"code":529,"is_editable":530},214,"\u003Cstyle>\n  .article p { color: #2c3e50; }              \u002F* descendant: any depth *\u002F\n  .article > p { font-weight: bold; }          \u002F* child: direct children only *\u002F\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='article'>\n  \u003Cp>Direct child paragraph (bold and dark).\u003C\u002Fp>\n  \u003Cblockquote>\n    \u003Cp>Nested paragraph (dark, but NOT bold).\u003C\u002Fp>\n  \u003C\u002Fblockquote>\n\u003C\u002Fdiv>",true,{"id":532,"language":440,"code":533,"is_editable":530},215,"\u003Cstyle>\n  ul > li { color: #8e44ad; }\n  ul ul > li { color: #16a085; }\n\u003C\u002Fstyle>\n\u003Cul>\n  \u003Cli>Top level item\u003C\u002Fli>\n  \u003Cli>Top level with nested list\n    \u003Cul>\n      \u003Cli>Nested item\u003C\u002Fli>\n      \u003Cli>Nested item\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fli>\n\u003C\u002Ful>",{"id":535,"language":440,"code":536,"is_editable":530},216,"\u003Cstyle>\n  h2 + p { font-size: 20px; color: #c0392b; }   \u002F* only the paragraph right after h2 *\u002F\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Ch2>Lead paragraph below\u003C\u002Fh2>\n\u003Cp>I am immediately after the h2, so I am larger and red.\u003C\u002Fp>\n\u003Cp>I am a normal paragraph.\u003C\u002Fp>",{"id":538,"language":440,"code":539,"is_editable":530},217,"\u003Cstyle>\n  h2 ~ p { border-left: 4px solid #2980b9; padding-left: 10px; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cp>Before the h2: not styled.\u003C\u002Fp>\n\u003Ch2>Heading\u003C\u002Fh2>\n\u003Cp>Sibling one (styled).\u003C\u002Fp>\n\u003Cdiv>Some other element\u003C\u002Fdiv>\n\u003Cp>Sibling two (styled too).\u003C\u002Fp>",{"id":541,"language":440,"code":542,"is_editable":530},218,"\u003Cstyle>\n  .item { padding: 12px; background: #ecf0f1; font-family: sans-serif; }\n  .item + .item { margin-top: 8px; border-top: 2px solid #bdc3c7; }\n\u003C\u002Fstyle>\n\u003Cdiv class='item'>First\u003C\u002Fdiv>\n\u003Cdiv class='item'>Second\u003C\u002Fdiv>\n\u003Cdiv class='item'>Third\u003C\u002Fdiv>",{"id":544,"language":440,"code":545,"is_editable":530},219,"\u003Cstyle>\n  .toggle-menu { display: none; padding: 10px; background: #e8f8f5; }\n  #menu-check:checked ~ .toggle-menu { display: block; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cinput type='checkbox' id='menu-check'>\n\u003Clabel for='menu-check'>Toggle menu\u003C\u002Flabel>\n\u003Cdiv class='toggle-menu'>Menu content shown with the sibling combinator and :checked (no JavaScript).\u003C\u002Fdiv>",[547,553],{"id":415,"title":548,"slug":549,"prompt":550,"starter_code":551,"expected_output":552,"language":440,"order_index":9},"Navigation Links Only","navigation-links-only","Make the links that are DIRECT children of the nav orange, but leave the link inside the nested dropdown div unchanged.","\u003Cstyle>\n  \u002F* Your rule here *\u002F\n\u003C\u002Fstyle>\n\u003Cnav>\n  \u003Ca href='#'>Home\u003C\u002Fa>\n  \u003Ca href='#'>About\u003C\u002Fa>\n  \u003Cdiv class='dropdown'>\n    \u003Ca href='#'>Dropdown link\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Fnav>","nav > a { color: orange; }",{"id":419,"title":554,"slug":555,"prompt":556,"starter_code":557,"expected_output":558,"language":440,"order_index":23},"Style the Sibling After a Label","style-the-sibling-after-a-label","Add a green border to the input that comes immediately after a label. Then make every paragraph that follows the h3 (as siblings) gray.","\u003Cstyle>\n  \u002F* Your rules here *\u002F\n\u003C\u002Fstyle>\n\u003Clabel>Email\u003C\u002Flabel>\n\u003Cinput type='text'>\n\u003Ch3>Notes\u003C\u002Fh3>\n\u003Cp>One\u003C\u002Fp>\n\u003Cp>Two\u003C\u002Fp>","label + input { border: 2px solid green; } h3 ~ p { color: gray; }","2026-09-29T18:33:20+00:00",{"id":403,"slug":405,"title":404},{"id":411,"slug":413,"title":412}]