[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:modern-css-selectors-is-where-has":6,"course-tree":133,"blog-categories":539},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":85,"quiz":103,"exercises":108,"published_at":5,"updated_at":124,"prev":125,"next":129},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has","\u003Ch2 id=\"why-modern-css-selectors-matter\">Why Modern CSS Selectors Matter\u003C\u002Fh2>\u003Cp>For years, CSS developers wished for a \u003Cstrong>CSS parent selector\u003C\u002Fstrong> and a shorter way to write long selector lists. Today \u003Ccode>:is()\u003C\u002Fcode>, \u003Ccode>:where()\u003C\u002Fcode> and \u003Ccode>:has()\u003C\u002Fcode> deliver exactly that. These \u003Cstrong>modern CSS selectors\u003C\u002Fstrong> reduce repetition, lower specificity problems and remove the need for JavaScript in many UI states. Our focus keyword for this lesson is \u003Cstrong>modern CSS selectors\u003C\u002Fstrong>, and you will also learn trending topics such as the CSS :has() parent selector, CSS :is() vs :where(), forgiving selector lists, CSS nesting with :is(), and container-friendly component styling.\u003C\u002Fp>\u003Ch2 id=\"the-is-pseudo-class\">The :is() Pseudo-class\u003C\u002Fh2>\u003Cp>\u003Ccode>:is()\u003C\u002Fcode> takes a list of selectors and matches any element that matches at least one of them. It shortens repetitive code.\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F* Before *\u002F\nheader a:hover, nav a:hover, footer a:hover { color: tomato; }\n\n\u002F* After *\u002F\n:is(header, nav, footer) a:hover { color: tomato; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"key-facts-about-is\">Key facts about :is()\u003C\u002Fh3>\u003Cul>\u003Cli>Its selector list is \u003Cstrong>forgiving\u003C\u002Fstrong>: if one selector inside is invalid or unsupported, the others still work. In older syntax, one invalid selector would invalidate the entire rule.\u003C\u002Fli>\u003Cli>The specificity of \u003Ccode>:is()\u003C\u002Fcode> equals the specificity of its \u003Cstrong>most specific argument\u003C\u002Fstrong>. So \u003Ccode>:is(#id, .class)\u003C\u002Fcode> counts as an ID selector, even when the matched element used the class.\u003C\u002Fli>\u003Cli>It cannot target pseudo-elements such as \u003Ccode>::before\u003C\u002Fcode> inside the list.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"the-where-pseudo-class\">The :where() Pseudo-class\u003C\u002Fh2>\u003Cp>\u003Ccode>:where()\u003C\u002Fcode> works exactly like \u003Ccode>:is()\u003C\u002Fcode> with one massive difference: \u003Cstrong>its specificity is always zero\u003C\u002Fstrong>. That makes it perfect for base styles, resets, and library defaults that authors should be able to override easily.\u003C\u002Fp>\u003Cpre>\u003Ccode>:where(ul, ol) { padding-inline-start: 1.5rem; }\n\n\u002F* Any simple selector overrides it *\u002F\n.menu { padding-inline-start: 0; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"is-vs-where-at-a-glance\">:is() vs :where() at a glance\u003C\u002Fh3>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003C\u002Fth>\u003Cth>:is()\u003C\u002Fth>\u003Cth>:where()\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Matches selector list\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Forgiving list\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Specificity\u003C\u002Ftd>\u003Ctd>Highest argument\u003C\u002Ftd>\u003Ctd>Always 0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Best for\u003C\u002Ftd>\u003Ctd>Shortening component rules\u003C\u002Ftd>\u003Ctd>Resets, defaults, low-priority styles\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"the-has-relational-pseudo-class-parent-selector\">The :has() Relational Pseudo-class (Parent Selector)\u003C\u002Fh2>\u003Cp>\u003Ccode>:has()\u003C\u002Fcode> selects an element \u003Cem>based on what it contains or what follows it\u003C\u002Fem>. It is called the \u003Cstrong>CSS parent selector\u003C\u002Fstrong> because for the first time you can style a parent depending on its children.\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F* Card that contains an image *\u002F\n.card:has(img) { display: grid; grid-template-columns: 120px 1fr; }\n\n\u002F* Label of an invalid input *\u002F\nlabel:has(input:invalid) { color: crimson; }\n\n\u002F* Heading immediately followed by a paragraph *\u002F\nh2:has(+ p) { margin-block-end: .25rem; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"powerful-has-patterns\">Powerful :has() patterns\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Form validation styling\u003C\u002Fstrong> without JavaScript: \u003Ccode>.field:has(input:user-invalid)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Theme toggles\u003C\u002Fstrong>: \u003Ccode>html:has(#dark-toggle:checked)\u003C\u002Fcode> can switch color variables for the whole page.\u003C\u002Fli>\u003Cli>\u003Cstrong>Conditional layouts\u003C\u002Fstrong>: change a card layout if it contains a figure, a video or a button.\u003C\u002Fli>\u003Cli>\u003Cstrong>Quantity queries\u003C\u002Fstrong>: \u003Ccode>ul:has(li:nth-child(5))\u003C\u002Fcode> styles a list only when it has at least five items.\u003C\u002Fli>\u003Cli>\u003Cstrong>Sibling lookahead\u003C\u002Fstrong>: \u003Ccode>.step:has(+ .step.active)\u003C\u002Fcode> styles the step before the active one.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"rules-and-limitations\">Rules and limitations\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>:has()\u003C\u002Fcode> cannot be nested inside another \u003Ccode>:has()\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Pseudo-elements are not valid inside \u003Ccode>:has()\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Its specificity equals its most specific argument, just like \u003Ccode>:is()\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>The list is not forgiving in the same way as \u003Ccode>:is()\u003C\u002Fcode>. An invalid selector inside can invalidate the rule in some browsers, so test carefully.\u003C\u002Fli>\u003Cli>Browser support: \u003Ccode>:has()\u003C\u002Fcode> became supported in all major evergreen browsers (Chrome, Safari, Edge, Firefox) by the end of 2023, so it is safe for most modern projects. Use \u003Ccode>@supports selector(:has(*))\u003C\u002Fcode> if you need a fallback.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"bonus-not-for-exclusion\">Bonus: :not() for Exclusion\u003C\u002Fh2>\u003Cp>\u003Ccode>:not()\u003C\u002Fcode> completes the toolkit. Modern browsers accept a selector list inside it: \u003Ccode>a:not(.button, .nav-link) { text-decoration: underline; }\u003C\u002Fcode>. Like \u003Ccode>:is()\u003C\u002Fcode>, its specificity is that of its most specific argument.\u003C\u002Fp>\u003Ch2 id=\"combining-with-css-nesting\">Combining with CSS Nesting\u003C\u002Fh2>\u003Cp>Native CSS nesting works well with these selectors. Notice how the nested rule uses \u003Ccode>&\u003C\u002Fcode> together with \u003Ccode>:is()\u003C\u002Fcode> and \u003Ccode>:has()\u003C\u002Fcode>:\u003C\u002Fp>\u003Cpre>\u003Ccode>.card {\n  padding: 1rem;\n  &:has(img) { display: grid; }\n  :is(h2, h3) { margin: 0; }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"performance-notes\">Performance Notes\u003C\u002Fh2>\u003Cp>Browsers have optimized \u003Ccode>:has()\u003C\u002Fcode> heavily, but be sensible. Avoid extremely broad anchors like \u003Ccode>*:has(.x)\u003C\u002Fcode> or \u003Ccode>body:has(...)\u003C\u002Fcode> chains with deep descendant checks in huge DOMs. Prefer scoping to a component class, for example \u003Ccode>.card:has(img)\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use \u003Ccode>:where()\u003C\u002Fcode> for library defaults so that users can override without specificity wars.\u003C\u002Fli>\u003Cli>Use \u003Ccode>:is()\u003C\u002Fcode> to group parents and reduce repetition, but remember the specificity bump.\u003C\u002Fli>\u003Cli>Scope \u003Ccode>:has()\u003C\u002Fcode> to a component class for clarity and speed.\u003C\u002Fli>\u003Cli>Provide fallbacks with \u003Ccode>@supports selector(:has(*))\u003C\u002Fcode> when supporting older browsers.\u003C\u002Fli>\u003Cli>Keep selectors readable. If a rule needs three nested functional pseudo-classes, refactor with a class.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>\u003Ccode>:is()\u003C\u002Fcode> shortens selector lists, \u003Ccode>:where()\u003C\u002Fcode> does the same with zero specificity, and \u003Ccode>:has()\u003C\u002Fcode> unlocks the long-awaited parent selector. Together they let you write shorter, more powerful, and more maintainable CSS. Experiment with the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :is(header, main, footer) a { color: #2563eb; text-decoration: none; }\n  :is(header, main, footer) a:hover { color: #dc2626; text-decoration: underline; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<header><a href='#'>Home<\u002Fa><\u002Fheader>\n<main><a href='#'>Article link<\u002Fa><\u002Fmain>\n<footer><a href='#'>Contact<\u002Fa><\u002Ffooter>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :where(.btn) { padding: 10px 20px; background: #64748b; color: #fff; border: 0; border-radius: 6px; }\n  .btn-primary { background: #16a34a; }\n  .btn-danger { background: #dc2626; }\n<\u002Fstyle>\n<button class='btn'>Default<\u002Fbutton>\n<button class='btn btn-primary'>Primary<\u002Fbutton>\n<button class='btn btn-danger'>Danger<\u002Fbutton>\n<p style='font-family:sans-serif'>Because :where() has zero specificity, a single class overrides the base style.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .card { border: 2px solid #cbd5e1; border-radius: 10px; padding: 16px; margin-bottom: 16px; max-width: 360px; }\n  .card:has(img) { border-color: #2563eb; background: #eff6ff; }\n  .card:has(.badge) h3::after { content: ' (featured)'; color: #f59e0b; font-size: .8em; }\n  img { width: 100%; height: 60px; background: #93c5fd; display: block; }\n<\u002Fstyle>\n<div class='card'><h3>Plain card<\u002Fh3><p>No image, default look.<\u002Fp><\u002Fdiv>\n<div class='card'><img alt=''><h3>Image card<\u002Fh3><p>Parent styled because it contains an image.<\u002Fp><\u002Fdiv>\n<div class='card'><h3>Badge card<\u002Fh3><span class='badge'><\u002Fspan><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .field { padding: 8px; border-left: 4px solid #94a3b8; margin-bottom: 12px; max-width: 320px; }\n  .field:has(input:valid:not(:placeholder-shown)) { border-left-color: #16a34a; background: #f0fdf4; }\n  .field:has(input:invalid:not(:placeholder-shown)) { border-left-color: #dc2626; background: #fef2f2; }\n  label { display: block; font-weight: bold; }\n<\u002Fstyle>\n<div class='field'><label>Email<\u002Flabel><input type='email' placeholder=' ' required><\u002Fdiv>\n<p>Type an invalid or valid email to see the parent change color, no JavaScript.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --bg: #ffffff; --fg: #0f172a; }\n  html:has(#dark:checked) { --bg: #0f172a; --fg: #f8fafc; }\n  body { background: var(--bg); color: var(--fg); font-family: sans-serif; padding: 20px; transition: background .3s; }\n<\u002Fstyle>\n<label><input type='checkbox' id='dark'> Dark mode<\u002Flabel>\n<h2>Theme switch with :has()<\u002Fh2>\n<p>The whole page reacts to a checkbox using only CSS.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Selectors & the Cascade","selectors-the-cascade",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"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":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],5,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fmodern-css-selectors-is-where-has","CSS :is(), :where() and :has() Selectors Explained","Master modern CSS selectors :is(), :where() and :has(), the parent selector, with live examples, specificity rules and browser support.",[31,36,45,53,65,69,73,77,81],{"id":32,"text":33,"level":34,"children":35},"why-modern-css-selectors-matter","Why Modern CSS Selectors Matter",2,[],{"id":37,"text":38,"level":34,"children":39},"the-is-pseudo-class","The :is() Pseudo-class",[40],{"id":41,"text":42,"level":43,"children":44},"key-facts-about-is","Key facts about :is()",3,[],{"id":46,"text":47,"level":34,"children":48},"the-where-pseudo-class","The :where() Pseudo-class",[49],{"id":50,"text":51,"level":43,"children":52},"is-vs-where-at-a-glance",":is() vs :where() at a glance",[],{"id":54,"text":55,"level":34,"children":56},"the-has-relational-pseudo-class-parent-selector","The :has() Relational Pseudo-class (Parent Selector)",[57,61],{"id":58,"text":59,"level":43,"children":60},"powerful-has-patterns","Powerful :has() patterns",[],{"id":62,"text":63,"level":43,"children":64},"rules-and-limitations","Rules and limitations",[],{"id":66,"text":67,"level":34,"children":68},"bonus-not-for-exclusion","Bonus: :not() for Exclusion",[],{"id":70,"text":71,"level":34,"children":72},"combining-with-css-nesting","Combining with CSS Nesting",[],{"id":74,"text":75,"level":34,"children":76},"performance-notes","Performance Notes",[],{"id":78,"text":79,"level":34,"children":80},"best-practices","Best Practices",[],{"id":82,"text":83,"level":34,"children":84},"summary","Summary",[],[86,91,94,97,100],{"id":87,"language":88,"code":89,"is_editable":90},239,"html","\u003Cstyle>\n  :is(header, main, footer) a { color: #2563eb; text-decoration: none; }\n  :is(header, main, footer) a:hover { color: #dc2626; text-decoration: underline; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cheader>\u003Ca href='#'>Home\u003C\u002Fa>\u003C\u002Fheader>\n\u003Cmain>\u003Ca href='#'>Article link\u003C\u002Fa>\u003C\u002Fmain>\n\u003Cfooter>\u003Ca href='#'>Contact\u003C\u002Fa>\u003C\u002Ffooter>",true,{"id":92,"language":88,"code":93,"is_editable":90},240,"\u003Cstyle>\n  :where(.btn) { padding: 10px 20px; background: #64748b; color: #fff; border: 0; border-radius: 6px; }\n  .btn-primary { background: #16a34a; }\n  .btn-danger { background: #dc2626; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Default\u003C\u002Fbutton>\n\u003Cbutton class='btn btn-primary'>Primary\u003C\u002Fbutton>\n\u003Cbutton class='btn btn-danger'>Danger\u003C\u002Fbutton>\n\u003Cp style='font-family:sans-serif'>Because :where() has zero specificity, a single class overrides the base style.\u003C\u002Fp>",{"id":95,"language":88,"code":96,"is_editable":90},241,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .card { border: 2px solid #cbd5e1; border-radius: 10px; padding: 16px; margin-bottom: 16px; max-width: 360px; }\n  .card:has(img) { border-color: #2563eb; background: #eff6ff; }\n  .card:has(.badge) h3::after { content: ' (featured)'; color: #f59e0b; font-size: .8em; }\n  img { width: 100%; height: 60px; background: #93c5fd; display: block; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Ch3>Plain card\u003C\u002Fh3>\u003Cp>No image, default look.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='card'>\u003Cimg alt=''>\u003Ch3>Image card\u003C\u002Fh3>\u003Cp>Parent styled because it contains an image.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='card'>\u003Ch3>Badge card\u003C\u002Fh3>\u003Cspan class='badge'>\u003C\u002Fspan>\u003C\u002Fdiv>",{"id":98,"language":88,"code":99,"is_editable":90},242,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .field { padding: 8px; border-left: 4px solid #94a3b8; margin-bottom: 12px; max-width: 320px; }\n  .field:has(input:valid:not(:placeholder-shown)) { border-left-color: #16a34a; background: #f0fdf4; }\n  .field:has(input:invalid:not(:placeholder-shown)) { border-left-color: #dc2626; background: #fef2f2; }\n  label { display: block; font-weight: bold; }\n\u003C\u002Fstyle>\n\u003Cdiv class='field'>\u003Clabel>Email\u003C\u002Flabel>\u003Cinput type='email' placeholder=' ' required>\u003C\u002Fdiv>\n\u003Cp>Type an invalid or valid email to see the parent change color, no JavaScript.\u003C\u002Fp>",{"id":101,"language":88,"code":102,"is_editable":90},243,"\u003Cstyle>\n  :root { --bg: #ffffff; --fg: #0f172a; }\n  html:has(#dark:checked) { --bg: #0f172a; --fg: #f8fafc; }\n  body { background: var(--bg); color: var(--fg); font-family: sans-serif; padding: 20px; transition: background .3s; }\n\u003C\u002Fstyle>\n\u003Clabel>\u003Cinput type='checkbox' id='dark'> Dark mode\u003C\u002Flabel>\n\u003Ch2>Theme switch with :has()\u003C\u002Fh2>\n\u003Cp>The whole page reacts to a checkbox using only CSS.\u003C\u002Fp>",{"id":104,"slug":105,"title":106,"time_limit_seconds":5,"pass_percentage":107,"question_count":24},32,"modern-selectors-quiz","Modern Selectors Quiz",70,[109,117],{"id":110,"title":111,"slug":112,"prompt":113,"starter_code":114,"expected_output":115,"language":88,"order_index":116},99,"Refactor with :is()","refactor-with-is","The CSS below repeats the same declaration for three selectors. Rewrite it using a single :is() selector so the result is identical. Do not change the HTML.","\u003Cstyle>\n  section h2, article h2, aside h2 { color: teal; }\n  section h3, article h3, aside h3 { color: teal; }\n\u003C\u002Fstyle>\n\u003Csection>\u003Ch2>Section\u003C\u002Fh2>\u003Ch3>Sub\u003C\u002Fh3>\u003C\u002Fsection>\n\u003Carticle>\u003Ch2>Article\u003C\u002Fh2>\u003C\u002Farticle>\n\u003Caside>\u003Ch3>Aside\u003C\u002Fh3>\u003C\u002Faside>","All h2 and h3 elements inside section, article and aside are teal, using one rule.",1,{"id":118,"title":119,"slug":120,"prompt":121,"starter_code":122,"expected_output":123,"language":88,"order_index":34},100,"Style a Parent with :has()","style-parent-with-has","Using :has(), give every .post that contains a \u003Cvideo> element a dark background (#111) and white text. Posts without a video must stay unchanged.","\u003Cstyle>\n  .post { padding: 12px; margin: 8px 0; border: 1px solid #ccc; }\n  \u002F* Write your :has() rule here *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='post'>Text-only post\u003C\u002Fdiv>\n\u003Cdiv class='post'>Video post \u003Cvideo>\u003C\u002Fvideo>\u003C\u002Fdiv>","Only the second post has a dark background and white text.","2026-09-29T18:45:14+00:00",{"id":126,"slug":127,"title":128},91,"css-pseudo-elements-before-after","CSS Pseudo-elements (::before, ::after)",{"id":130,"slug":131,"title":132},93,"css-specificity-explained","CSS Specificity Explained",{"data":134},[135,454],{"id":116,"name":136,"slug":137,"icon":5,"icon_url":5,"short_description":138,"meta_title":139,"meta_description":140,"og_image":141,"locale":142,"subcategories":143},"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",[144,168,204,228,303,337,351,379,403,419],{"id":116,"name":145,"slug":146,"order_index":116,"topics":147},"HTML Fundamentals & Setup","html-fundamentals-setup",[148,151,154,157,161,164],{"id":34,"title":149,"slug":150,"order_index":116,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":116,"title":152,"slug":153,"order_index":116,"cornerstone":25,"reading_time_minutes":116},"HTML Introduction & History","html-introduction-and-history",{"id":43,"title":155,"slug":156,"order_index":43,"cornerstone":25,"reading_time_minutes":34},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":158,"title":159,"slug":160,"order_index":158,"cornerstone":25,"reading_time_minutes":34},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":24,"title":162,"slug":163,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":165,"title":166,"slug":167,"order_index":165,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":169,"slug":170,"order_index":34,"topics":171},"Text & Content Basics","text-content-basics",[172,176,180,184,188,192,196,200],{"id":173,"title":174,"slug":175,"order_index":173,"cornerstone":25,"reading_time_minutes":34},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":177,"title":178,"slug":179,"order_index":177,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":181,"title":182,"slug":183,"order_index":181,"cornerstone":25,"reading_time_minutes":116},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":185,"title":186,"slug":187,"order_index":185,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":189,"title":190,"slug":191,"order_index":189,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":43,"name":205,"slug":206,"order_index":43,"topics":207},"Links, Media & Navigation","links-media-navigation",[208,212,216,220,224],{"id":209,"title":210,"slug":211,"order_index":209,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":213,"title":214,"slug":215,"order_index":213,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":217,"title":218,"slug":219,"order_index":217,"cornerstone":25,"reading_time_minutes":116},17,"HTML Favicon Setup","html-favicon-setup",{"id":221,"title":222,"slug":223,"order_index":221,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":225,"title":226,"slug":227,"order_index":225,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":158,"name":229,"slug":230,"order_index":158,"topics":231},"Structuring Content","structuring-content",[232,237,242,247,252,256,260,264,268,271,275,279,283,287,291,295,299],{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":243,"title":244,"slug":245,"order_index":246,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":248,"title":249,"slug":250,"order_index":251,"cornerstone":25,"reading_time_minutes":116},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":253,"title":254,"slug":255,"order_index":233,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":257,"title":258,"slug":259,"order_index":238,"cornerstone":25,"reading_time_minutes":116},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":261,"title":262,"slug":263,"order_index":243,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":265,"title":266,"slug":267,"order_index":248,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":104,"title":269,"slug":270,"order_index":253,"cornerstone":25,"reading_time_minutes":34},"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":272,"title":273,"slug":274,"order_index":257,"cornerstone":25,"reading_time_minutes":43},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":276,"title":277,"slug":278,"order_index":261,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":280,"title":281,"slug":282,"order_index":265,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":284,"title":285,"slug":286,"order_index":104,"cornerstone":25,"reading_time_minutes":116},77,"HTML Symbols","html-symbols",{"id":288,"title":289,"slug":290,"order_index":288,"cornerstone":25,"reading_time_minutes":116},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":292,"title":293,"slug":294,"order_index":292,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":296,"title":297,"slug":298,"order_index":296,"cornerstone":25,"reading_time_minutes":116},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":300,"title":301,"slug":302,"order_index":300,"cornerstone":25,"reading_time_minutes":116},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":173,"name":304,"slug":305,"order_index":24,"topics":306},"Forms & User Input","forms-user-input",[307,312,317,322,327,332],{"id":308,"title":309,"slug":310,"order_index":311,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":313,"title":314,"slug":315,"order_index":316,"cornerstone":25,"reading_time_minutes":116},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":318,"title":319,"slug":320,"order_index":321,"cornerstone":25,"reading_time_minutes":116},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":323,"title":324,"slug":325,"order_index":326,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":328,"title":329,"slug":330,"order_index":331,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":333,"title":334,"slug":335,"order_index":336,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":177,"name":338,"slug":339,"order_index":165,"topics":340},"Graphics & Visuals","graphics-visuals",[341,346],{"id":342,"title":343,"slug":344,"order_index":345,"cornerstone":25,"reading_time_minutes":43},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":347,"title":348,"slug":349,"order_index":350,"cornerstone":25,"reading_time_minutes":43},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":181,"name":352,"slug":353,"order_index":173,"topics":354},"Multimedia","multimedia",[355,360,365,370,375],{"id":356,"title":357,"slug":358,"order_index":359,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":361,"title":362,"slug":363,"order_index":364,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":366,"title":367,"slug":368,"order_index":369,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":371,"title":372,"slug":373,"order_index":374,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":376,"title":377,"slug":378,"order_index":308,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":185,"name":380,"slug":381,"order_index":177,"topics":382},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[383,387,391,395,399],{"id":384,"title":385,"slug":386,"order_index":313,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":388,"title":389,"slug":390,"order_index":318,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":392,"title":393,"slug":394,"order_index":323,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":396,"title":397,"slug":398,"order_index":328,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":400,"title":401,"slug":402,"order_index":333,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":189,"name":404,"slug":405,"order_index":181,"topics":406},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[407,411,415],{"id":408,"title":409,"slug":410,"order_index":342,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":412,"title":413,"slug":414,"order_index":347,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":416,"title":417,"slug":418,"order_index":356,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":193,"name":420,"slug":421,"order_index":185,"topics":422},"Reference & Practice","reference-practice",[423,426,430,434,438,442,446,450],{"id":107,"title":424,"slug":425,"order_index":116,"cornerstone":25,"reading_time_minutes":34},"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":427,"title":428,"slug":429,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":431,"title":432,"slug":433,"order_index":43,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":435,"title":436,"slug":437,"order_index":158,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":439,"title":440,"slug":441,"order_index":24,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":443,"title":444,"slug":445,"order_index":165,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":447,"title":448,"slug":449,"order_index":173,"cornerstone":25,"reading_time_minutes":43},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":451,"title":452,"slug":453,"order_index":177,"cornerstone":25,"reading_time_minutes":116},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":455,"meta_title":456,"meta_description":457,"og_image":5,"locale":142,"subcategories":458},"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.",[459,484,514],{"id":197,"name":460,"slug":461,"order_index":462,"topics":463},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[464,468,472,476,480],{"id":465,"title":466,"slug":467,"order_index":116,"cornerstone":25,"reading_time_minutes":158},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":469,"title":470,"slug":471,"order_index":34,"cornerstone":25,"reading_time_minutes":158},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":473,"title":474,"slug":475,"order_index":43,"cornerstone":25,"reading_time_minutes":43},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":477,"title":478,"slug":479,"order_index":158,"cornerstone":25,"reading_time_minutes":43},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":481,"title":482,"slug":483,"order_index":24,"cornerstone":25,"reading_time_minutes":24},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":209,"name":485,"slug":486,"order_index":462,"topics":487},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[488,492,496,500,504,507,510],{"id":489,"title":490,"slug":491,"order_index":201,"cornerstone":25,"reading_time_minutes":24},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":493,"title":494,"slug":495,"order_index":209,"cornerstone":25,"reading_time_minutes":158},96,"CSS Backgrounds","css-backgrounds",{"id":497,"title":498,"slug":499,"order_index":213,"cornerstone":25,"reading_time_minutes":24},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":501,"title":502,"slug":503,"order_index":217,"cornerstone":25,"reading_time_minutes":24},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":110,"title":505,"slug":506,"order_index":221,"cornerstone":25,"reading_time_minutes":165},"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":118,"title":508,"slug":509,"order_index":225,"cornerstone":25,"reading_time_minutes":24},"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":511,"title":512,"slug":513,"order_index":236,"cornerstone":25,"reading_time_minutes":165},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":201,"name":16,"slug":17,"order_index":462,"topics":515},[516,520,524,528,532,533,534,535],{"id":517,"title":518,"slug":519,"order_index":165,"cornerstone":25,"reading_time_minutes":158},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":521,"title":522,"slug":523,"order_index":173,"cornerstone":25,"reading_time_minutes":158},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":525,"title":526,"slug":527,"order_index":177,"cornerstone":25,"reading_time_minutes":158},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":529,"title":530,"slug":531,"order_index":181,"cornerstone":25,"reading_time_minutes":165},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":126,"title":128,"slug":127,"order_index":185,"cornerstone":25,"reading_time_minutes":24},{"id":8,"title":9,"slug":10,"order_index":189,"cornerstone":25,"reading_time_minutes":24},{"id":130,"title":132,"slug":131,"order_index":193,"cornerstone":25,"reading_time_minutes":158},{"id":536,"title":537,"slug":538,"order_index":197,"cornerstone":25,"reading_time_minutes":24},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":540},[541,544,547,552,557],{"name":13,"slug":14,"description":542,"post_count":34,"subcategories":543},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":136,"slug":88,"description":545,"post_count":34,"subcategories":546},"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":548,"slug":549,"description":550,"post_count":116,"subcategories":551},"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":553,"slug":554,"description":555,"post_count":116,"subcategories":556},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":558,"slug":559,"description":560,"post_count":116,"subcategories":561},"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.",[]]