[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573160-105":53,"doc-detail-573160-en":126},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":119,"head_meta":121,"extra_data":123,"updated_unix":125},105,"en","the-ultimate-css-cheat-sheet-by-pushaune-reference","The Ultimate CSS Cheat Sheet by PUShAUNE - Reference","","Concise CSS cheat sheet that explains how CSS selectors work and how to target elements by tag, id, class, hierarchy, adjacency, attributes, and states like hover or visited. Provides practical reference syntax for common selector patterns and pseudo-elements. Also summarizes key CSS properties for positioning, display, z-index, overflow and visibility, floats, Flexbox (container and items), lists, counters, list styles, colors and backgrounds, tables, and miscellaneous utilities like cursor and quotation styling.",{"@graph":63,"@context":118},[64,80,101],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/the-ultimate-css-cheat-sheet-by-pushaune-reference/573160/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/the-ultimate-css-cheat-sheet-by-pushaune-reference/573160.png","ImageObject",442,249,{"name":88,"@type":89},"Damian","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-18","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":79},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"How do I target a specific element using CSS selectors?","Question",{"text":108,"@type":109},"Use selectors such as #my_id for an id or .my_class for a class. You can also combine selectors for descendants or adjacent elements like X Y or X + Y.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"What Flexbox properties control the container layout and child alignment?",{"text":113,"@type":109},"Use flex-direction, flex-wrap, justify-content, align-items, and align-content to control the overall flex container behavior and alignment of children.",{"name":115,"@type":106,"acceptedAnswer":116},"Which CSS properties are commonly used for backgrounds and colors?",{"text":117,"@type":109},"Use color and background-color for text and background color, and background-image/background-position/background-size/background-repeat for images. background-attachment controls how the image behaves during scrolling.","https://schema.org",{"og:url":78,"og:type":120,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":122,"canonical":78},"index,follow",{"doc_id":124,"site_id":56},573160,1792023034,{"code":4,"msg":5,"data":127},{"doc_id":124,"user_id":128,"nickname":88,"user_avatar":129,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":79,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":9,"language":135,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":61,"update_tm":139,"read_time":4},137451208677,"https://ap-avatar.wpscdn.com/davatar_155a257f0dc6eb9ab79c44ca47cae57d","THE ULTIMATE CSS CHEAT SHEET BY PUShAUNE  \nHow CSS works  \nThe tags you want to target  \nFilter the tags by .class  \n[tag](tag.my_class {)[.my_](tag.my_class {)~~[class](tag.my_class {)~~[ {](tag.my_class {)  \nSelector  \nproperty: value;}  \nThe style you apply  \nWhat you want to stylise  \nSelectors  \n*  \nTarget all items. Can be used with descendants items: \\#container *  \n\\#my_id  \nTarget a specific id  \n.my_class  \nTarget a specific class  \nX Y  \nTarget descendants items  \nX  \nTarget all the same items  \nX + Y  \nTarget an adjacent item  \nX > Y  \nTarget the child item  \nX ~ Y  \nTarget any adjacent item contained in a specific parent  \nX[title]  \nTarget any specific items with a title  \nX[href=\"[https://www.pushaune.com](https://www.pushaune.com)\"]  \nTarget any specific items with a specific href  \nX[href*=\"pushaune\"]  \nTarget any specific items with a value which appear somewhere in href  \nX[href^=\"[http](http)\"]  \nTarget any specific items with [http which begins with](http which begins with) [http](http)  \nX[href$=\".jpg\"]  \nTarget any specific items with [http which end with .jpg](http which end with .jpg)  \nX:hover  \nTarget any specific items when the user hovers over it  \nX:link  \nTarget any specific link items which have yet to be clicked on  \nX:visited  \nTarget any specific link items which have been clicked on  \nX:checked  \nTarget a specific item that has been checked, like a checkbox  \nX::before  \nTarget a pseudo-element that is the first child of the Targeted item  \nX::after  \nTarget a pseudo-element that is the last child of the Targeted item  \nX:not(selector)  \nTarget any specific items, except for the ones which match the Targetor  \nX::first-line  \nTarget the first line of the item  \nX::first-letter  \nTarget the first letter of the item  \nX:nth-child(n)  \nTarget specific elements in a stack (n as value or a variable)  \nX:last-child(n)  \nTarget specific elements in a stack (n as value or a variable)  \nX:nth-last-child(n)  \nTarget specific elements in a stack begining at the end of the collection  \nX:nth-of-type(n)  \nTarget specific elements in a stack based on his type  \nX:nth-last-of-type(n)  \nTarget specific elements in a stack based on his type, begining at the end  \nX:first-child  \nTarget only the first child of the item’s parent  \nX:last-child  \nTarget only the last child of the item’s parent  \nX:only-child  \nTarget items which are the only child of its parent  \nX:only-of-type  \nTarget items which are the only child of its parent based on his type  \nX:first-of-type  \nTarget the first siblings of its type  \n This Cheat Sheet is powered by PUShAUNE. It’s under the Creative Commons BY NC ND. -v.1.1 2017-10-Cré[dits: Roboto font. and developer.mozilla.org](dits: Roboto font. and developer.mozilla.org)  \nPositioning  \ndisplay  \nHow to display \u003Ctag>  \nposition  \nHow to position \u003Ctag>  \ntop  \nVertical position  \nright  \nRight position  \nbottom  \nBottom position  \nleft  \nLeft position  \nclear  \nNext or down a floating \u003Ctag>  \nz-index  \nSpecifies the \u003Ctag> z-order  \ndirection  \nContent direction  \noverflow  \nDisplay overflowing content  \nvisibility  \nWithout affecting the layout  \nfloat  \nWraping in the flow  \nnone | block | inline | inline-block | flex  \nrelative | absolute | fixed | static | sticky  \nvalue (px, em or %) | auto | initial | unset  \nvalue (px, em or %) | auto | initial | unset  \nvalue (px, em or %) | auto | initial | unset  \nvalue (px, em or %) | auto | initial | unset  \nnone | left | right | both | inline-start | inline-end  \nauto | value  \nltr | rtl  \nvisible | hidden | scroll | auto  \nvisible | hidden | collapse  \nleft | right | none | inline-start | inline-end  \nFlexbox /* container */  \nflex-direction  \nDirection of the child \u003Ctag>  \nflex-wrap  \nHow to allow wrapping  \njustify-content  \nAlignment of the child \u003Ctag>  \nalign-items  \nVertical alignment  \nalign-content  \nVertical gutter  \nrow | row-reverse | column | column-reverse  \nnowrap | wrap | wrap-reverse  \nflex-start | flex-end | center | spacebetween | space-around | space-evenly  \n","cbCaijmV3yiNph4l","https://ap.wps.com/l/cbCaijmV3yiNph4l","pdf",604053,"English","# How CSS works\n# Selector patterns\n## Targeting and attribute selectors\n## Pseudo-classes and pseudo-elements\n# Style application\n# Positioning and layout\n## Display and position\n## Float and visibility\n# Flexbox\n## Container properties\n## Item properties\n# Lists and counters\n# Colors and background\n# Tables\n# Miscellaneous","[{\"question\":\"How do I target a specific element using CSS selectors?\",\"answer\":\"Use selectors such as #my_id for an id or .my_class for a class. You can also combine selectors for descendants or adjacent elements like X Y or X + Y.\"},{\"question\":\"What Flexbox properties control the container layout and child alignment?\",\"answer\":\"Use flex-direction, flex-wrap, justify-content, align-items, and align-content to control the overall flex container behavior and alignment of children.\"},{\"question\":\"Which CSS properties are commonly used for backgrounds and colors?\",\"answer\":\"Use color and background-color for text and background color, and background-image/background-position/background-size/background-repeat for images. background-attachment controls how the image behaves during scrolling.\"}]","The Ultimate CSS Cheat Sheet by PUShAUNE - Reference | PDF",1791933635]