[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-573157-105":3,"detail-sidebar-cat-1-en-105":80,"doc-detail-573157-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","css-selectors-cheatsheet","CSS Selectors - Cheatsheet","","CSS Selectors cheatsheet providing a compact reference for common selector types and their behaviors. It includes class and id selectors, universal and element selectors, combinations with commas and spaces, and relationship operators like descendant, child, adjacent sibling, and general sibling. It also covers attribute selectors and pseudo-classes/pseudo-elements such as active, hover, focus, checked, disabled, empty, and insertion rules like ::before and ::after, plus additional input state and language-based selectors.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/general/","General",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/css-selectors-cheatsheet/573157/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/css-selectors-cheatsheet/573157.png","ImageObject",442,249,{"name":42,"@type":43},"AfterMidnight","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-16","2026-10-13",true,{"@type":52,"interactionType":53,"userInteractionCount":33},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"How do you select elements by class or id in CSS?","Question",{"text":62,"@type":63},"Use .class to select elements with a given class name, and #id to select the element with the matching id value.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"What are the main combinators for selecting related elements?",{"text":67,"@type":63},"Use a space for descendant selectors, > for direct children, + for adjacent siblings, and ~ to select following siblings.",{"name":69,"@type":60,"acceptedAnswer":70},"How do attribute selectors work and when are they useful?",{"text":71,"@type":63},"Attribute selectors like [attribute], [attribute=value], and [attribute^=value] let you target elements based on the presence or specific patterns of attribute values, such as selecting links whose href starts with https.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},573157,1792087331,{"code":4,"msg":81,"data":82},"success",[83,88,93,98,103,108,113,118,123],{"id":84,"doc_module":22,"doc_module_name":25,"category_name":85,"show_sort_weight":86,"slug":87},11,"Presentations",90,"presentations",{"id":89,"doc_module":22,"doc_module_name":25,"category_name":90,"show_sort_weight":91,"slug":92},12,"Resumes",80,"resumes",{"id":94,"doc_module":22,"doc_module_name":25,"category_name":95,"show_sort_weight":96,"slug":97},14,"Invoices",70,"invoices",{"id":99,"doc_module":22,"doc_module_name":25,"category_name":100,"show_sort_weight":101,"slug":102},15,"Posters",60,"posters",{"id":104,"doc_module":22,"doc_module_name":25,"category_name":105,"show_sort_weight":106,"slug":107},16,"Social Media",50,"social-media",{"id":109,"doc_module":22,"doc_module_name":25,"category_name":110,"show_sort_weight":111,"slug":112},17,"Forms",40,"forms",{"id":114,"doc_module":22,"doc_module_name":25,"category_name":115,"show_sort_weight":116,"slug":117},18,"Letters",30,"letters",{"id":119,"doc_module":22,"doc_module_name":25,"category_name":120,"show_sort_weight":121,"slug":122},21,"Paper Templates",5,"papers-templates",{"id":124,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":4,"slug":125},158,"general-158",{"code":4,"msg":81,"data":127},{"doc_id":78,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":124,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":33,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":26,"language":135,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":12,"update_tm":139,"read_time":22},962090896061,"https://ap-avatar.wpscdn.com/davatar_9964176cb1d06d4a9deccf72a44ae3dc","# CSS Selectors\n\nA cheatsheet by Welcm Software  \n\n| Selector   | Example   | What It Does   |\n| --- | --- | --- |\n| .class   | .btn   | Selects all elements with class=\"btn\"   |\n| \\#id   | \\#myButton   | Selects the element with id=\"myButton\"   |\n| ★   | *   | Selects all elements   |\n| element   | h1   | Selects all \u003Ch1>elements   |\n| element,element   | div,p   | Selects all \u003Cdiv>elements and all\u003Cp>elements   |\n| element element   | div p   | Selects all \u003Cp>elements inside \u003Cdiv>elements   |\n| element>element   | div>p   | Selects all\u003Cp>elements where the parent is a \u003Cdiv>element   |\n| element+element   | div+p   | Selects all\u003Cp>elements that are placed directly after \u003Cdiv>elements   |\n| element1~element2   | p～ul   | Selects every \u003Cul>element that is preceded by a\u003Cp>element   |\n| [attribute]   | [data-toggle]   | Selects allelements with a data-toggle attribute   |\n| [attribute=value]   | [data-toggle=dropdown]   | Selects all elements with data-toggle=\"dropdown\"   |\n| [attribute~=value]   | [title~=cheatsheet]   | Selects all elements with a title attribute containing the word \"cheatsheet\"   |\n| [attributel=value]   | [langl=en]   | Selects all elements with a lang atribute value starting with \"en\"   |\n| [attribute^=value]   | a[href^=\"https\"]   | Selects every \u003Ca>element whose href attribute value begins with \"https\"   |\n| [attribute$=value]   | a[href$=\".Iy\"]   | Selects every \u003Ca>element whose href attribute value ends with \".Iy\"   |\n| [attribute*=value]   | a[href*=\"welcm\"]   | Selects every\u003Ca>element whose href attribute value contains the substring \"welcm\"   |\n| active   | a:active   | Selects the active link   |\n| :after   | p::after   | Insert something after the content of each\u003Cp>element   |\n| :before   | p::before   | Insert something before the content of each \u003Cp>element   |\n| checked   | input:checked   | Selects every checked\u003Cinput>element   |\n| default   | input:default   | Selects the default \u003Cinput>element   |\n| disabled   | button:disabled   | Selects every disabled \u003Cbutton>element   |\n| empty   | p:empty   | Selects every \u003Cp>element that has no children(including text nodes)   |\n| enabled   | input:enabled   | Selects every enabled \u003Cinput>element   |\n| first-child   | p:first-child   | Selects every \u003Cp>element that is the first child of its parent   |\n| :first-letter   | p::first-letter   | Selects the first letter of every \u003Cp>element   |\n| :first-line   | p::first-line   | Selects the first line of every \u003Cp>element   |\n| first-of-type   | p:first-0f-type   | Selects every\u003Cp>element that is the first\u003Cp>element of its parent   |\n| focus   | input:focus   | Selects the input element that has focus   |\n| hover   | a:hover   | Selects links on mouse over   |\n\nM @welcm  \nhttps://welcm.uk  \n\n| Selector   | Example   | What It Does   |\n| --- | --- | --- |\n| in-range   | input:in-range   | Selects input elements with a value within a specified range   |\n| indeterminate   | input:indeterminate   | Selects input elements that are in an indeterminate state   |\n| invalid   | input:invalid   | Selects all input elements with an invalid value   |\n| lang(language)   | p:lang(en)   | Selects every \u003Cp>element with a lang attribute equal to \"en\"(English)   |\n| last-child   | p:last-child   | Selects every\u003Cp>element that is the last child of its parent   |\n| last-of-type   | p:last-0f-type   | Selects every\u003Cp>element that is the last\u003Cp>element of its parent   |\n| link   | a:link   | Selects all unvisited links   |\n| not(selector)   | :not(h1)   | Selects every element that is not an \u003Ch1>element   |\n| nth-child(n)   | p:nth-child(3)   | Selects every \u003Cp>element that is the third child of its parent   |\n| nth-last-child(n)   | p:nth-last-child(3)   | Selects every \u003Cp>element that is the third child of its parent,counting from the last  \u003Cbr>child   |\n| nth-last-of-type(n)   | p:nth-last-of-type(3)   | Selects every \u003Cp>element that is the third\u003Cp>element of its parent,counting from  \u003Cbr>the last child   |\n| nth-of-type(n)   | p:","cbCailX6h8PCZslk","https://ap.wps.com/l/cbCailX6h8PCZslk","pdf",1884142,"English","# CSS Selectors Basics\n## Class, ID, Universal, and Element Selectors\n## Combinators and Relationship Selectors\n## Attribute Selectors\n# Pseudo-classes and Pseudo-elements\n## State, Position, and Language-Based Selectors\n## Structural and Content Insertion Selectors","[{\"question\":\"How do you select elements by class or id in CSS?\",\"answer\":\"Use .class to select elements with a given class name, and #id to select the element with the matching id value.\"},{\"question\":\"What are the main combinators for selecting related elements?\",\"answer\":\"Use a space for descendant selectors, \\u003e for direct children, + for adjacent siblings, and ~ to select following siblings.\"},{\"question\":\"How do attribute selectors work and when are they useful?\",\"answer\":\"Attribute selectors like [attribute], [attribute=value], and [attribute^=value] let you target elements based on the presence or specific patterns of attribute values, such as selecting links whose href starts with https.\"}]","CSS Selectors - Cheatsheet | PDF",1791933626]