Selectors Cheat Sheet.pdf

CSS {selectors: cheat-sheet} By Web Dev Simplified https://courses.webdevsimplified.com Basic Name CSS Description Results Universal Selector *...

CSS {selectors: cheat-sheet} By Web Dev Simplified https://courses.webdevsimplified.com Basic Name CSS Description Results Universal Selector * Select all elements a b c d Select elements of that type Type Selector div Select div elements a div c div Select elements with that class Class Selector.c Select elements with the c class.a.b.c.d Select elements with that id Id Selector #i Select elements with the i id *It is best practice to not use ids in CSS #a #b #i #d Combination Name CSS Description Results Select elements that are div descendants of the first Descendant Selector div a element a b Select anchors that are inside a div a c a d Select elements that are direct div Direct Child Selector div > a children of the first element Select anchors that are direct children of a b a div a c a d Select elements that are siblings of the first element General Sibling div ~ a and come after the first a div a a Selector element Selects all anchors that are siblings of a div and come after the div Select elements that are siblings of the first element Adjacent Sibling div + a and come directly after the a div a a Selector first element Selects all anchors that are siblings of a div and come directly after the div Select elements that match Or Selector div, a any selector in the list Selects all anchors and all divs a div a b Select elements that match all And Selector div.c the selector combinations Selects all divs with the class c.a div.c.c div Attribute Name CSS Description Results Select elements that have that Has Attribute [a] attribute [a] [a=”1”] [c] d Select elements with the a attribute Select elements that have that attribute with exactly that Exact Attribute [a=”1”] value [a] [a=”1”] [c] d Select elements with the a attribute with a value of 1 Select elements that have that attribute which start with that Begins With Attribute [a^=”1”] value [a=”12”] [a=”21”] Select elements with the a attribute with a value that starts with 1 Select elements that have that attribute which end with that Ends With Attribute [a$=”1”] value [a=”12”] [a=”21”] Select elements with the a attribute with a value that ends with 1 Select elements that have that attribute which contain that Substring Attribute [a*=”1”] value anywhere [a=”12”] [a=”21”] Select elements with the a attribute with a value that contains a 1 Pseudo Element Name CSS Description Results Creates an empty element div Before Selector div::before directly before the children of selected element before c after Creates an empty element div After Selector div::after directly after the children of selected element before c after Pseudo Class State Name CSS Description Select elements that are Hover Selector button:hover hovered by the mouse Select buttons that are being hovered Select elements that are focused. Focus Selector button:focus Select buttons that are being focused *Focus is set by either tabbing to an element or clicking an element such as a button or anchor tag Select inputs that are required Required Selector input:required Select inputs with the required attribute Select checkboxes/radio Checked Selector input:checked buttons that are checked Select inputs that are checked Disabled Selector input:disabled Select inputs that are disabled Select inputs with the disabled attribute Pseudo Class Position/Other Name CSS Description Results Select elements that are the div div First Child Selector a:first-child first child inside a container Select anchors that are the first child a b b a Select elements that are the div div Last Child Selector a:last-child last child inside a container Select anchors that are the last child a b b a Select elements that are the nth child inside a container div Nth Child Selector a:nth-child(2n) based on the formula Select anchors that are even numbered a a b a children Select elements that are the nth child inside a container div Nth Last Child a:nth-last-child(3) based on the formula counting Selector from the end a a b a Select anchors that are the third to last child Select elements that are the div div Only Child Selector a:only-child only child inside a container Select anchors that are the only child a b a Select elements that are the first of a type inside a div First Of Type Selector a:first-of-type container Select the first anchor in a container b a a b Select elements that are the last of a type inside a div Last Of Type Selector a:last-of-type container Select the last anchor in a container b a a b Select elements that are the nth of a type inside a container div Nth Of Type Selector a:nth-of-type(2n) based on the formula Select every second anchor b a a b Select elements that are the Nth Last Of nth of a type inside a container div Type Selector a:nth-last-of-type(2) based on the formula counting from the end b a a b Select the second to last anchor Select elements that are the only of a type inside a div Only Of Type Selector a:only-of-type container Select anchors that are the only anchor in b b a b a container Select all elements that do not match the selector inside the Not Selector a:not(.c) not selector b a.c a a.d Select all anchor tags that do not have the c class