[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-573155-105":3,"detail-sidebar-cat-1-en-105":72,"doc-detail-573155-en":118},{"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":65,"head_meta":67,"extra_data":69,"updated_unix":71},105,"en","css-selectors-cheatsheet-quick-reference-for-css-selector-types","CSS selectors cheatsheet - quick reference for CSS selector types","","CSS selectors cheatsheet by nana jeon (Feb 2019) is a quick-reference reference for major CSS selector patterns and their matching behavior. It summarizes combinators and selector types including type, universal, ID, class, child and descendant relationships, comma combinators, and universal combinations. It also covers pseudo-classes such as first/last/only/ nth child, nth-last-child, first/last/only-of-type, empty, negation (not), and attribute selectors with value operators, including prefix, suffix, and wildcard matching.",{"@graph":14,"@context":64},[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/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/css-selectors-cheatsheet-quick-reference-for-css-selector-types/573155/",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-quick-reference-for-css-selector-types/573155.png","ImageObject",442,249,{"name":42,"@type":43},"lilac","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-19","2026-10-13",true,{"@type":52,"interactionType":53,"userInteractionCount":30},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58],{"name":59,"@type":60,"acceptedAnswer":61},"Which attribute selector matching operators are included?","Question",{"text":62,"@type":63},"It includes basic attribute selection and value-specific matching, plus starts-with (^) , ends-with ($) , and contains/wildcard (* ) operators to filter elements by attribute content.","Answer","https://schema.org",{"og:url":32,"og:type":66,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":68,"canonical":32},"index,follow",{"doc_id":70,"site_id":7},573155,1792023220,{"code":4,"msg":73,"data":74},"success",[75,79,84,89,94,99,104,109,114],{"id":76,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":77,"slug":78},11,90,"presentations",{"id":80,"doc_module":22,"doc_module_name":25,"category_name":81,"show_sort_weight":82,"slug":83},12,"Resumes",80,"resumes",{"id":85,"doc_module":22,"doc_module_name":25,"category_name":86,"show_sort_weight":87,"slug":88},14,"Invoices",70,"invoices",{"id":90,"doc_module":22,"doc_module_name":25,"category_name":91,"show_sort_weight":92,"slug":93},15,"Posters",60,"posters",{"id":95,"doc_module":22,"doc_module_name":25,"category_name":96,"show_sort_weight":97,"slug":98},16,"Social Media",50,"social-media",{"id":100,"doc_module":22,"doc_module_name":25,"category_name":101,"show_sort_weight":102,"slug":103},17,"Forms",40,"forms",{"id":105,"doc_module":22,"doc_module_name":25,"category_name":106,"show_sort_weight":107,"slug":108},18,"Letters",30,"letters",{"id":110,"doc_module":22,"doc_module_name":25,"category_name":111,"show_sort_weight":112,"slug":113},21,"Paper Templates",5,"papers-templates",{"id":115,"doc_module":22,"doc_module_name":25,"category_name":116,"show_sort_weight":4,"slug":117},158,"General","general-158",{"code":4,"msg":73,"data":119},{"doc_id":70,"user_id":120,"nickname":42,"user_avatar":121,"doc_module":22,"category_id":76,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":122,"file_id":123,"file_url":124,"file_type":125,"file_size":126,"view_count":30,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":127,"language":128,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":129,"faqs":130,"seo_title":131,"seo_description":12,"update_tm":132,"read_time":26},3985747861865,"https://ap-avatar.wpscdn.com/davatar_29158cc5080c5b710cf443261637dec0","CSS  \nselectors cheatsheet  \n\\# > . , * + ~ : [ ] ( ) { }  \nby nana jeon Feb 2019  \nCSS selectors cheatsheet by nana jeon is licensed  \nunder a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License .  \nCSS selectors cheatsheet  \n\n| Selector name | HTML | CSS | Infographic |\n| --- | --- | --- | --- |\n| Type Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/> | a {} |  b \u003Cbr>|\n| ID Selector | \u003C .. id=“a”/>\u003Cbr>\u003C .. id=“b”/>\u003Cbr>\u003C .. id=“c”/> | \\#a {} | \\#a \\#b \\#c\u003Cbr>* ID is not recommended as a selector\u003Cbr>|\n| Child\u003Cbr>Selector | \u003Ca>\u003Cbr>\u003Cb>\u003Ca/>\u003Cb/>\u003C/b>\u003Cc>\u003Ca/>\u003Cb/>\u003Cbr>\u003C/c>\u003C/a> | a > b {} | a\u003Cbr>\u003Cbr>\u003Cbr>\u003Cbr>|\n| Descendant\u003Cbr>Selector | \u003Ca>\u003Cbr>\u003Cb>\u003Ca/>\u003Cb/>\u003C/b>\u003Cc>\u003Ca/>\u003Cb/>\u003Cbr>\u003C/c>\u003C/a> | a b {} | a\u003Cbr>\u003Cbr>\u003Cbr>\u003Cbr>|\n| Combine\u003Cbr>Descendant & ID\u003Cbr>Selectors | \u003Ca id=“a”>\u003Cbr>\u003Cb>\u003Ca/>\u003Cb/>\u003C/b>\u003Cc>\u003Ca/>\u003Cb/>\u003Cbr>\u003C/c>\u003C/a> | \\#a b {} | \\#a\u003Cbr>\u003Cbr>\u003Cbr>\u003Cbr>|\n| Class\u003Cbr>Selector | \u003C .. class=“a”/>\u003Cbr>\u003C .. class=“b”/>\u003Cbr>\u003C .. class=“c”/> | .a {} | .a .b .c\u003Cbr>|\n| Combine the Class\u003Cbr>Selector | \u003Ca class=“x”/>\u003Cbr>\u003Cb class=“x”/>\u003Cbr>\u003Cc class=“x”/> | b.x {} | a.x b.x c.x\u003Cbr>|\n| Comma Combinator\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cd/> | a, c {} |  b  d\u003Cbr>|\n| Universal\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cd/> | * {} |  b  d\u003Cbr>|\n| Combine Universal\u003Cbr>Selector | \u003Ca>\u003Cbr>\u003Cb>\u003Ca/>\u003Cb/>\u003C/b>\u003Cc>\u003Ca/>\u003Cb/>\u003Cbr>\u003C/c>\u003C/a> | a * {} | a\u003Cbr>\u003Cbr>\u003Cbr>\u003Cbr>|\n\n1 / 4 © Designed by nana jeon 2019  \n\n| Adjacent Sibling\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> | a + b {} |  b b b\u003Cbr>|\n| --- | --- | --- | --- |\n| General Sibling\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cb/> | a ~ b {} |  b b  b\u003Cbr>|\n| First Child Pseudo\u003Cbr>Selector | \u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> | b:first-child {} | b b b\u003Cbr>|\n|  |  |  | first-child\u003Cbr> b b *first-child is `a` element, not `b` element. So there is nothing to be selected.\u003Cbr>|\n|  | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> |  |  |\n| Only Child Pseudo\u003Cbr>Selector | \u003Ca>\u003Cbr>\u003Cb/>\u003Cbr>\u003C/a>\u003Cbr>\u003Ca>\u003Cbr>\u003Cb/>\u003Cb/>\u003C/a>\u003Cbr>\u003Ca>\u003Cbr>\u003Ca/>\u003Cb/>\u003Cc/>\u003C/a> | b:only-child {} | |\n|  |  | a :only-child {} |  |\n| Last Child Pseudo\u003Cbr>Selector | \u003Cb/>\u003Cbr>\u003Cb/> | b:last-child {} | b b b\u003Cbr>|\n|  | \u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/> |  | last-child\u003Cbr>\u003Cbr>b b c\u003Cbr>*last-child is `c` element, not `b` element. So there is nothing to be selected. |\n| Nth Child Pseudo\u003Cbr>Selector | \u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> | b:nth-child(2) {} | 1 2 3\u003Cbr>b b b\u003Cbr>|\n|  | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> |  | 1 2 3\u003Cbr> b b\u003Cbr>|\n|  | \u003Cb/>\u003Cbr>\u003Ca/>\u003Cbr>\u003Cb/> |  | 1 2 3\u003Cbr>b  b\u003Cbr>* nth-child(2) is `a` element, not `b` element. So there is nothing to be selected.\u003Cbr>|\n|  | \u003Ca>\u003Cbr>\u003Ca/>\u003Cb/>\u003Cc/>\u003C/a> | a :nth-child(2) {} | \u003Cbr>a\u003Cbr>\u003Cbr> b \u003Cbr>|\n| Nth Last Child\u003Cbr>Selector | \u003Ca>\u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cd/>\u003C/a> | a :nth-last-child(2) {} | a\u003Cbr>\u003Cbr>\u003Cbr> b  d\u003Cbr>4 3 2 1\u003Cbr>\u003Cbr>|\n|  |  | c:nth-last-child(2) {} |  |\n|  |  | a:nth-last-child(2) {} | a\u003Cbr>\u003Cbr>\u003Cbr> b  d\u003Cbr>4 3 2 1\u003Cbr>\u003Cbr>|\n|  |  | b:nth-last-child(2) {} |  |\n|  |  | d:nth-last-child(2) {} |  |\n\n2 / 4 © Designed by nana jeon 2019  \n\n| First of Type\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Ca/>\u003Cbr>\u003Cb/> | b:first-of-type {} |  b  b\u003Cbr>|  |  |  |  |\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| Nth of Type\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Ca/ >\u003Cbr>\u003Cb/>\u003Cbr>\u003Ca/ > | a:nth-of-type(2) {} | 1 2 3\u003Cbr> b  b \u003Cbr>|  |  | \u003Cbr>b | |\n|  |  | a:nth-of-type(even) {} | 1 2 3\u003Cbr> b  b \u003Cbr>|  |  | \u003Cbr>b | |\n|  |  | a:nth-of-type(odd) {} | 1 2 3\u003Cbr> b  b \u003Cbr>|  |  | \u003Cbr>b | |\n|  |  | a:nth-of-type(2n+1) {} | 1 2 3 4\u003Cbr> b  b  b * `n` is an every positive integer or zero value.\u003Cbr>|  |  |  |  |\n| Only of Type\u003Cbr>Selector | \u003Ca>\u003Cbr>\u003Cb/>\u003Cbr>\u003C/a>\u003Cbr>\u003Ca>\u003Cbr>\u003Cb/>\u003Cb/>\u003Cbr>\u003C/a>\u003Cbr>\u003Ca>\u003Cbr>\u003Ca/>\u003Cb/>\u003Cc/>\u003C/a> | b:only-of-type {} | | | |  |  |\n| Last of Type\u003Cbr>Selector | \u003Ca/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cb/> | b:last-of-type {} |  b b\u003Cbr>|  |  |  |  |\n|  | \u003Ca>\u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cd/>\u003Cbr>\u003C/a> | a :last-of-type {} | \u003Cbr>a\u003Cbr>\u003Cbr>b b b\u003Cbr>|  |  |  |  |\n|  | \u003Ca>\u003Cb/>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cd/>\u003Cbr>\u003C/a> |  | \u003Cbr>a\u003Cbr>\u003Cbr>b b  d\u003Cbr>|  |  |  |  |\n|  | \u003Ca>\u003Cbr>\u003Cb/>\u003Cbr>\u003Cc/>\u003Cbr>\u003Cb class=“x”/>\u003Cbr>\u003Cc class=“x”/>\u003Cbr>\u003Cb class=“x”/>\u003Cbr>\u003Cc class=“","cbCaifnqE34hyqBL","https://ap.wps.com/l/cbCaifnqE34hyqBL","pdf",189034,6,"English","# Selector types and combinators\n## Type, ID, class, universal, and combinators\n## Child/descendant and mixed selectors\n# Pseudo-classes\n## Child and sibling related pseudo-classes\n## Type-related pseudo-classes\n# Attributes and conditions\n## Empty and negation pseudo-classes\n## Attribute selector operators (value, starts/ends, wildcard)","[{\"question\":\"Which attribute selector matching operators are included?\",\"answer\":\"It includes basic attribute selection and value-specific matching, plus starts-with (^) , ends-with ($) , and contains/wildcard (* ) operators to filter elements by attribute content.\"}]","CSS selectors cheatsheet - quick reference for CSS selector types | PDF",1791933622]