A List of CSS Selectors to Learn and Practice

web4college.com web4college.com3 years ago in #Dev Love177

CSS selectors cheat sheet gives us a quick overview of what we’ll learn in CSS selectors Designers often confuse with the attribute selectors, element selectors, pseudo elements, pseudo-classes, combinators. But they all are selectors. And this cheat sheet has been presented in such a way that it ends up confusing between different kind of selectors. Selector’s cheat sheet represents all the selectors with examples so that you can learn it easily and quickly. See a complete list of CSS selectors. 3. Pseudo Elements ::firs-line ::first-letter ::selection ::after ::before :placeholder 4. Combinators Descendent combinator Child combinator (‘>’) Next-sibling combinator (‘+’) Following combinator (‘~’) 6. Input Pseudo-classes :disabled :enabled :checked :read-only :placeholder-shown :out-of-range :required 7. Structural Pseudo-classes :first-child :nth-child(E) :last-child :nth-last-child(E) :only-child :first-of-type :nth-of-type(E) :last-of-type :nth-last-of-type(n) A detailed explanation of CSS Selectors The elements are selected by the element names or universal selector. Type selector The element selectors select the elements by the element name or a list of element names and then applies CSS properties to the selected elements. p, span, code{ color:red; } </> Universal selector (*) ‘*’ is a universal selector. It selects all of the elements and applies CSS properties. *{ color:red; } </> Attribute selectors select those elements that have attributes and values according to the rules of attributes selectors. [att] [att] selects those elements that have ‘att’ attribute. input[type] </> [att=val] [att=val] selects those elements that have ‘att’ attribute with the value ‘val’ div[title=”warning”] </> [att~=val] ‘~’ selector selects those elements that have ‘att’ attribute with at least one value matching the ‘val’ value a[rel~=”next”] </> [att|=val] ‘|’ selector selects the elements that have ‘att’ attribute with the value ‘val’ following a hyphen (-). a[hreflang|=”en-US”] </> [att^=val] ‘^’ selector selects the elements that have ‘att’ attribute and the value starting with ‘val’. img[type^=”image/”] </> [att$=val] ‘$’ selector selects those elements that have ‘att’ attribute and the value ending with ‘val’ img[type$=”png”] </> [att*=val] ‘*’ selector selects the elements that have ‘att’ attribute with the ‘val’ value as substring. p[class*=”sign”] </> A pseudo element consists of double color (::) following the name of pseudo element. And pseudo element applies CSS properties to the associated element. It accesses the content that is not present in the hierarchy. And that is not accessible by the document language in a document tree. ::firs-line ::first-line selects firs-line of associated element and applies CSS properties. p::first-line{font-size:20px;} </> ::first-letter ::first-letter selects the first letter of the associated element and applies CSS properties. p::first-letter{text-transform:uppercase;} </> ::selection ::selection represents the text selected by the user in the associated element. div::selection{background-color:lightgreen;} </> ::after ::after selects the content generated from CSS and the generated content is after the associated element. div::after{content:”…learn more”;} </> ::before ::before selects the content generated from CSS and the generated content is before the associated element. div::before{content:”Tip: “;} </> ::placeholder ::placeholder pseudo element selects the input elements that have placeholder attribute. input::placeholder{color:blue;} </> It selects elements based on the relation between elements within the hierarchy of elements i.e based on whether it is child, next, or a descedent element. Descendent combinator descendent combinator selects and applies CSS properties to the orbitrary child element. div p{background-color:green;} </> Child combinator (‘>’) child combinator selects and applies CSS properties to the child element. ol > li{ background-color:lightblue;} </> Next-sibling combinator (‘+’) ‘+’ combinator selects and applies CSS properties to the next immediate element of the current element. p+code{ color:red;} </> Following combinator (‘~’) ‘~’ combinator selects and applies CSS properties to the next element of the current element. code ~ kbd{ color:rgb(0,225,0);} </> 5. Pseudo classes Pseudo class consists of single colon (‘:’) and pseudo class…

Like to keep reading?

This article first appeared on web4college.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply