Download CSS Selectors Cheatsheet and more Schemes and Mind Maps Programming Languages in PDF only on Docsity! OSS selectors cheatsheet #>.,*4+~:[]() {} by nana jeon Feb 2019 CSS selectors cheatsheet a Type Selector <a/> <b/> <c/> a {} ®@OO ID Selector #a {} @ ® & * ID is not recommended as a selector Child Selector <a> <b> <a/><b/> </b> <c> <a/><b/> </c> </a> a>b {} @ ©) @®) @ © Descendant Selector <a> <b> <a/><b/> </b> <c> <a/><b/> </c> </a> ab {} Combine Descendant & ID Selectors <a id="a"> <b> <a/><b/> </b> <c> <a/><b/> </c> </a> #ab {} Class Selector sa {} Combine the Class Selector <a class=" <b class <c class="x"/> b.x {} Comma Combinator Selector <a/> <b/> <c/> <d/> a, c {} Universal Selector <a/> <b/> <c/> <d/> * {} Combine Universal Selector <a> <b> <a/><b/> </b> <c> <a/><b/> </c> </a> ax {} 1/4 © Designed by nana jeon 2019 - ®@® © Empty <a>hello</a> 3 hello Selector <a> arempty {} <b/><b/> </a> * empty’ indicates no children elements or text. <a/> | abs mai | @QO@B Negation <b class= Pseudo-class Selector ee Saye a:not(:last-of -type) {} @ (b) @ (a) <a/> [ter] @ @ @ @ Attribute Selector alter] © @ & & Attribute Value Selector al[for=“x"] @ @ w & Attribute Starts with Selector [for*="x"] @ @ & ® Attribute Ends with Selector [for$="x"] @ ® © @ Attribute Wildcard Selector [for*x="x"] @ @ & @ Only Child Pseudo VS Only of Type Only Child “8h /> Pseudo </a> Selector <a> <b/><b/> </a> <a> Only of Type <a/><b/><c/> Selector </a> b:only-child {} 659508 b:only-of-type {} o50see * Happy * codesign today!!! This cheatsheet is desinged for a quick search on CSS selectors. :) There are so many CSS selectors with unfamiliar symbols, > . , * + ~[Jetc, so 1am often confused with how CSS selectors work. | wish this infographic helps you find proper CSS selectors. Print this lovely cheatsheet out and stick it on the wall. And if you need more details on CSS selectors, check out my blog at medium.com/@nana8. I would love to hear your feedback on how I can make it better. Please leave your comments on my twitter @nanacodesign. Thank you !! 2aFgH ICH 4/4 © Designed by nana jeon 2019 f\ nana Visual designer with Coding LZ www.nanajeon.com twitter | @nanacodesign medium | @nana8 Tl Xe OU Ls] Collaborated with Ryan Yu the author of <FrontEnd3@/> which is for anyone who loves front-end and wanted to improve their front-end skills. www.FrontEnd30.com
