[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:css-attribute-selectors":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":411,"title":412,"slug":413,"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":534,"quiz":5,"exercises":551,"published_at":5,"updated_at":564,"prev":565,"next":566},"\u003Ch2 id=\"css-attribute-selectors-style-elements-by-their-attributes\">CSS Attribute Selectors: Style Elements by Their Attributes\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS attribute selectors\u003C\u002Fstrong> target elements based on the presence or value of an HTML attribute such as \u003Ccode>href\u003C\u002Fcode>, \u003Ccode>type\u003C\u002Fcode>, \u003Ccode>src\u003C\u002Fcode>, \u003Ccode>target\u003C\u002Fcode>, \u003Ccode>lang\u003C\u002Fcode>, \u003Ccode>disabled\u003C\u002Fcode> or \u003Ccode>data-*\u003C\u002Fcode>. They are extremely useful for forms, links, images and components, and let you style elements without adding extra classes.\u003C\u002Fp>\u003Ch2 id=\"attribute-selector-syntax-overview\">Attribute Selector Syntax Overview\u003C\u002Fh2>\u003Cp>All attribute selectors are written in square brackets. Quotes around the value are optional in simple cases, but recommended for values containing spaces, symbols or starting with digits.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Selector\u003C\u002Fth>\u003Cth>Meaning\u003C\u002Fth>\u003Cth>Example\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>[attr]\u003C\u002Ftd>\u003Ctd>Attribute exists\u003C\u002Ftd>\u003Ctd>[disabled]\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr='value']\u003C\u002Ftd>\u003Ctd>Exact value match\u003C\u002Ftd>\u003Ctd>[type='email']\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr~='value']\u003C\u002Ftd>\u003Ctd>Value is one word in a space-separated list\u003C\u002Ftd>\u003Ctd>[class~='card']\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr|='value']\u003C\u002Ftd>\u003Ctd>Value equals or starts with value followed by a hyphen\u003C\u002Ftd>\u003Ctd>[lang|='en']\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr^='value']\u003C\u002Ftd>\u003Ctd>Starts with\u003C\u002Ftd>\u003Ctd>[href^='https']\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr$='value']\u003C\u002Ftd>\u003Ctd>Ends with\u003C\u002Ftd>\u003Ctd>[href$='.pdf']\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>[attr*='value']\u003C\u002Ftd>\u003Ctd>Contains the substring\u003C\u002Ftd>\u003Ctd>[href*='example']\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"1-presence-selector-attr\">1. Presence Selector: [attr]\u003C\u002Fh2>\u003Cp>Matches any element that has the attribute, whatever its value. For example, \u003Ccode>[required]\u003C\u002Fcode> matches every required form field and \u003Ccode>a[target]\u003C\u002Fcode> matches links that have a target attribute.\u003C\u002Fp>\u003Ch2 id=\"2-exact-match-attrvalue\">2. Exact Match: [attr='value']\u003C\u002Fh2>\u003Cp>Matches only when the attribute value is exactly the given text. For example, \u003Ccode>input[type='password']\u003C\u002Fcode>. It is useful for styling different form input types separately.\u003C\u002Fp>\u003Ch2 id=\"3-word-match-attrvalue\">3. Word Match: [attr~='value']\u003C\u002Fh2>\u003Cp>Matches when the value is one of several whitespace-separated words. It works like a class selector on any attribute, for instance \u003Ccode>[data-tags~='new']\u003C\u002Fcode> matches \u003Ccode>data-tags='sale new featured'\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"4-language-and-hyphen-match-attrvalue\">4. Language and Hyphen Match: [attr|='value']\u003C\u002Fh2>\u003Cp>Matches when the value is exactly the given text or begins with it followed by a hyphen. It was designed for language codes: \u003Ccode>[lang|='en']\u003C\u002Fcode> matches en, en-US and en-GB.\u003C\u002Fp>\u003Ch2 id=\"5-starts-with-attrvalue\">5. Starts With: [attr^='value']\u003C\u002Fh2>\u003Cp>Matches when the value begins with the given string. Typical uses: external links (\u003Ccode>a[href^='https']\u003C\u002Fcode>), email links (\u003Ccode>a[href^='mailto:']\u003C\u002Fcode>) and phone links (\u003Ccode>a[href^='tel:']\u003C\u002Fcode>).\u003C\u002Fp>\u003Ch2 id=\"6-ends-with-attrvalue\">6. Ends With: [attr$='value']\u003C\u002Fh2>\u003Cp>Matches when the value ends with the given string. A classic example is adding an icon to file-type links: \u003Ccode>a[href$='.pdf']\u003C\u002Fcode>, \u003Ccode>a[href$='.zip']\u003C\u002Fcode>, \u003Ccode>img[src$='.svg']\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"7-contains-attrvalue\">7. Contains: [attr*='value']\u003C\u002Fh2>\u003Cp>Matches when the value contains the substring anywhere. For example, \u003Ccode>a[href*='facebook']\u003C\u002Fcode> or \u003Ccode>[class*='col-']\u003C\u002Fcode> (matches col-1, col-md-6 and so on).\u003C\u002Fp>\u003Ch2 id=\"case-insensitive-and-case-sensitive-flags\">Case-Insensitive and Case-Sensitive Flags\u003C\u002Fh2>\u003Cp>By default, attribute values are case-sensitive in HTML for most attributes, although some (such as type) are matched case-insensitively. Add a flag before the closing bracket:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>[href$='.PDF' i]\u003C\u002Fcode> ignores case (matches .pdf, .PDF, .Pdf).\u003C\u002Fli>\u003Cli>\u003Ccode>[data-mode='Dark' s]\u003C\u002Fcode> forces case-sensitive matching.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"practical-use-cases\">Practical Use Cases\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Form styling:\u003C\u002Fstrong> style text, email, checkbox, radio and submit inputs differently.\u003C\u002Fli>\u003Cli>\u003Cstrong>External link indicators:\u003C\u002Fstrong> add an arrow to links that start with https or open in a new tab.\u003C\u002Fli>\u003Cli>\u003Cstrong>Download icons:\u003C\u002Fstrong> show a PDF icon on links ending with .pdf.\u003C\u002Fli>\u003Cli>\u003Cstrong>Disabled and required states:\u003C\u002Fstrong> style [disabled] buttons and [required] fields with a marker.\u003C\u002Fli>\u003Cli>\u003Cstrong>Data attributes:\u003C\u002Fstrong> theme or state hooks such as [data-theme='dark'] or [data-state='open'], very common in modern component libraries and design systems.\u003C\u002Fli>\u003Cli>\u003Cstrong>Accessibility states:\u003C\u002Fstrong> style with [aria-expanded='true'] or [aria-current='page'] so that visual state always matches the accessible state.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"specificity\">Specificity\u003C\u002Fh2>\u003Cp>An attribute selector has the same specificity as a class: (0,1,0). So \u003Ccode>a[href^='https']\u003C\u002Fcode> scores (0,1,1). This is important when you mix attribute selectors with class rules.\u003C\u002Fp>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Always quote values to avoid errors with special characters.\u003C\u002Fli>\u003Cli>Prefer classes for simple, general styling; use attribute selectors where the attribute already carries the meaning (type, href, aria-*, data-*).\u003C\u002Fli>\u003Cli>Be specific: \u003Ccode>[href*='a']\u003C\u002Fcode> is too broad and will match many unintended links.\u003C\u002Fli>\u003Cli>Do not depend on attribute values that content editors may change often.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Confusing \u003Ccode>^=\u003C\u002Fcode> (starts) with \u003Ccode>$=\u003C\u002Fcode> (ends).\u003C\u002Fli>\u003Cli>Using \u003Ccode>~=\u003C\u002Fcode> when you mean \u003Ccode>*=\u003C\u002Fcode>: word match needs whole, space-separated words.\u003C\u002Fli>\u003Cli>Forgetting that a space in the value requires quotes.\u003C\u002Fli>\u003Cli>Forgetting that the selector matches the HTML attribute, not the JavaScript property.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Attribute selectors use square brackets and match presence or value patterns.\u003C\u002Fli>\u003Cli>^= starts with, $= ends with, *= contains, ~= word, |= language prefix.\u003C\u002Fli>\u003Cli>The i flag makes matching case-insensitive.\u003C\u002Fli>\u003Cli>They have class-level specificity (0,1,0) and are great for forms, links and data-attribute state.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  [required] { border: 2px solid #e67e22; }\n  input[type='email'] { background: #eaf4fc; }\n  input[type='password'] { background: #fdecea; }\n  input { padding: 8px; margin: 6px 0; display: block; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<input type='text' placeholder='Name'>\n<input type='email' placeholder='Email (required)' required>\n<input type='password' placeholder='Password'>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  a { display: block; margin: 8px 0; font-family: sans-serif; }\n  a[href^='https'] { color: #27ae60; }\n  a[href^='mailto:'] { color: #8e44ad; }\n  a[href$='.pdf'] { color: #c0392b; }\n  a[href$='.pdf']::after { content: ' (PDF)'; font-size: 12px; }\n  a[href*='example'] { font-weight: bold; }\n<\u002Fstyle>\n<a href='https:\u002F\u002Fexample.com'>Secure external link<\u002Fa>\n<a href='mailto:hello@example.com'>Email us<\u002Fa>\n<a href='files\u002Fguide.pdf'>Download guide<\u002Fa>\n<a href='page.html'>Internal page<\u002Fa>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  [data-status='success'] { background: #d4edda; color: #155724; }\n  [data-status='error'] { background: #f8d7da; color: #721c24; }\n  [data-status] { padding: 10px; margin: 6px 0; border-radius: 6px; font-family: sans-serif; }\n<\u002Fstyle>\n<div data-status='success'>Saved successfully<\u002Fdiv>\n<div data-status='error'>Something went wrong<\u002Fdiv>\n<div>No status, so unstyled<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  [data-tags~='new'] { border-left: 5px solid #2ecc71; }\n  [lang|='en'] { font-style: italic; }\n  p { padding: 8px; font-family: sans-serif; }\n<\u002Fstyle>\n<p data-tags='sale new featured'>Has the word new<\u002Fp>\n<p data-tags='sale renewed'>Contains renewed, but not the word new<\u002Fp>\n<p lang='en-US'>English (US) text<\u002Fp>\n<p lang='fr'>Texte francais<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  a[href$='.pdf' i] { background: #fff3cd; padding: 2px 6px; }\n  button[disabled] { opacity: 0.5; cursor: not-allowed; }\n  [aria-expanded='true'] { background: #d6eaf8; }\n  body { font-family: sans-serif; }\n<\u002Fstyle>\n<a href='REPORT.PDF'>Case-insensitive PDF match<\u002Fa><br><br>\n<button disabled>Disabled button<\u002Fbutton>\n<button aria-expanded='true'>Expanded<\u002Fbutton>\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-attribute-selectors","CSS Attribute Selectors: [attr], ^=, $=, *= Explained","Learn CSS attribute selectors: presence, exact, contains, starts-with, ends-with, word and case-insensitive matching with practical examples.",[474,478,482,486,490,494,498,502,506,510,514,518,522,526,530],{"id":475,"text":476,"level":23,"children":477},"css-attribute-selectors-style-elements-by-their-attributes","CSS Attribute Selectors: Style Elements by Their Attributes",[],{"id":479,"text":480,"level":23,"children":481},"attribute-selector-syntax-overview","Attribute Selector Syntax Overview",[],{"id":483,"text":484,"level":23,"children":485},"1-presence-selector-attr","1. Presence Selector: [attr]",[],{"id":487,"text":488,"level":23,"children":489},"2-exact-match-attrvalue","2. Exact Match: [attr='value']",[],{"id":491,"text":492,"level":23,"children":493},"3-word-match-attrvalue","3. Word Match: [attr~='value']",[],{"id":495,"text":496,"level":23,"children":497},"4-language-and-hyphen-match-attrvalue","4. Language and Hyphen Match: [attr|='value']",[],{"id":499,"text":500,"level":23,"children":501},"5-starts-with-attrvalue","5. Starts With: [attr^='value']",[],{"id":503,"text":504,"level":23,"children":505},"6-ends-with-attrvalue","6. Ends With: [attr$='value']",[],{"id":507,"text":508,"level":23,"children":509},"7-contains-attrvalue","7. Contains: [attr*='value']",[],{"id":511,"text":512,"level":23,"children":513},"case-insensitive-and-case-sensitive-flags","Case-Insensitive and Case-Sensitive Flags",[],{"id":515,"text":516,"level":23,"children":517},"practical-use-cases","Practical Use Cases",[],{"id":519,"text":520,"level":23,"children":521},"specificity","Specificity",[],{"id":523,"text":524,"level":23,"children":525},"best-practices","Best Practices",[],{"id":527,"text":528,"level":23,"children":529},"common-mistakes","Common Mistakes",[],{"id":531,"text":532,"level":23,"children":533},"key-takeaways","Key Takeaways",[],[535,539,542,545,548],{"id":536,"language":440,"code":537,"is_editable":538},220,"\u003Cstyle>\n  [required] { border: 2px solid #e67e22; }\n  input[type='email'] { background: #eaf4fc; }\n  input[type='password'] { background: #fdecea; }\n  input { padding: 8px; margin: 6px 0; display: block; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cinput type='text' placeholder='Name'>\n\u003Cinput type='email' placeholder='Email (required)' required>\n\u003Cinput type='password' placeholder='Password'>",true,{"id":540,"language":440,"code":541,"is_editable":538},221,"\u003Cstyle>\n  a { display: block; margin: 8px 0; font-family: sans-serif; }\n  a[href^='https'] { color: #27ae60; }\n  a[href^='mailto:'] { color: #8e44ad; }\n  a[href$='.pdf'] { color: #c0392b; }\n  a[href$='.pdf']::after { content: ' (PDF)'; font-size: 12px; }\n  a[href*='example'] { font-weight: bold; }\n\u003C\u002Fstyle>\n\u003Ca href='https:\u002F\u002Fexample.com'>Secure external link\u003C\u002Fa>\n\u003Ca href='mailto:hello@example.com'>Email us\u003C\u002Fa>\n\u003Ca href='files\u002Fguide.pdf'>Download guide\u003C\u002Fa>\n\u003Ca href='page.html'>Internal page\u003C\u002Fa>",{"id":543,"language":440,"code":544,"is_editable":538},222,"\u003Cstyle>\n  [data-status='success'] { background: #d4edda; color: #155724; }\n  [data-status='error'] { background: #f8d7da; color: #721c24; }\n  [data-status] { padding: 10px; margin: 6px 0; border-radius: 6px; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv data-status='success'>Saved successfully\u003C\u002Fdiv>\n\u003Cdiv data-status='error'>Something went wrong\u003C\u002Fdiv>\n\u003Cdiv>No status, so unstyled\u003C\u002Fdiv>",{"id":546,"language":440,"code":547,"is_editable":538},223,"\u003Cstyle>\n  [data-tags~='new'] { border-left: 5px solid #2ecc71; }\n  [lang|='en'] { font-style: italic; }\n  p { padding: 8px; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cp data-tags='sale new featured'>Has the word new\u003C\u002Fp>\n\u003Cp data-tags='sale renewed'>Contains renewed, but not the word new\u003C\u002Fp>\n\u003Cp lang='en-US'>English (US) text\u003C\u002Fp>\n\u003Cp lang='fr'>Texte francais\u003C\u002Fp>",{"id":549,"language":440,"code":550,"is_editable":538},224,"\u003Cstyle>\n  a[href$='.pdf' i] { background: #fff3cd; padding: 2px 6px; }\n  button[disabled] { opacity: 0.5; cursor: not-allowed; }\n  [aria-expanded='true'] { background: #d6eaf8; }\n  body { font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Ca href='REPORT.PDF'>Case-insensitive PDF match\u003C\u002Fa>\u003Cbr>\u003Cbr>\n\u003Cbutton disabled>Disabled button\u003C\u002Fbutton>\n\u003Cbutton aria-expanded='true'>Expanded\u003C\u002Fbutton>",[552,558],{"id":423,"title":553,"slug":554,"prompt":555,"starter_code":556,"expected_output":557,"language":440,"order_index":9},"Mark External Links","mark-external-links","Make links whose href starts with 'https' green and add the text ' (external)' after them using ::after. Make links that end with '.zip' bold.","\u003Cstyle>\n  \u002F* Your rules here *\u002F\n\u003C\u002Fstyle>\n\u003Ca href='https:\u002F\u002Fexample.com'>Website\u003C\u002Fa>\u003Cbr>\n\u003Ca href='downloads\u002Ffiles.zip'>Download ZIP\u003C\u002Fa>\u003Cbr>\n\u003Ca href='about.html'>About page\u003C\u002Fa>","Green https link with ' (external)' text, bold zip link, unchanged about link.",{"id":427,"title":559,"slug":560,"prompt":561,"starter_code":562,"expected_output":563,"language":440,"order_index":23},"Style by data Attribute","style-by-data-attribute","Give any element with data-priority='high' a red left border, and any element with data-priority='low' a gray left border. Elements with no data-priority stay unstyled.","\u003Cstyle>\n  \u002F* Your rules here *\u002F\n\u003C\u002Fstyle>\n\u003Cp data-priority='high'>Urgent task\u003C\u002Fp>\n\u003Cp data-priority='low'>Optional task\u003C\u002Fp>\n\u003Cp>Normal task\u003C\u002Fp>","[data-priority='high'] { border-left: 4px solid red; } [data-priority='low'] { border-left: 4px solid gray; }","2026-09-29T18:33:20+00:00",{"id":407,"slug":409,"title":408},{"id":415,"slug":417,"title":416}]