| `head` | selects the element with the 'head' tag |
@@ -25,10 +24,12 @@ We can combine selectors in interesting ways. Some examples:
| Selectors | Select |
|---|---|---|
-| `li a` | DOM descendant selector. All aa's tags that are child of li tags |
+| `li a` | DOM descendant combinator. All aa's tags that are child of li tags |
| `div.row *` | selects all elements that are descendant (or child) of the elements with div tag and 'row' class |
-| `li > a` | Difference selector. Select direct descendants, instead of all descendants like the descendant selectors |
-| `li + a` | The adjacent selector. It selects the element that is immediately preceded by the former element. In this case, only the first `a` after each `li`. |
+| `li > a` | Difference combinator. Select direct descendants, instead of all descendants like the descendant selectors |
+| `li + a` | The adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first `a` after each `li`. |
+| `li, a` | Selects all `a` elements and all `li` elements. |
+| `li ~ a` | The sibling combinator. Selects `a` element following a `li` element. |
Pseudo-selectors or pseudo structural classes are also useful for selecting structural elements from the DOM. Here are some of them:
@@ -37,8 +38,9 @@ Pseudo-selectors or pseudo structural classes are also useful for selecting stru
| `:first-child` | Target the first element immediately inside (or child of) another element |
| `:last-child` | Target the last element immediately inside (or child of) another element |
| `:nth-child()` | Target the nth element immediately inside (or child of) another element. Admits integers, `even`, odd` or formulas |
-| `:not()` | Target elements that are not the argument |
-| `::after` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. |
+| `a:not(.name)` | Selects all `a` elements that are not of the `.name` class |
+| `::after` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements. |
+| `::before` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements. |
We can use pseudo-elements to define a special state of an element of the DOM but don't point to an element by themselves . Some examples:
@@ -52,7 +54,7 @@ We can use pseudo-elements to define a special state of an element of the DOM bu
##Games
[CSS Diner](http://flukeout.github.io) is a web game that teaches almost everything there is to know about combining selectors.
-##this is a stub entry!
-Please read this article up from cheat sheets around the web and edit/complete this document!
+##Additional reference
+There are many more CSS selectors! Learn about them at [CodeTuts](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048), [CSS-tricks.com](https://css-tricks.com/almanac/selectors/), [w3schools.com](http://www.w3schools.com/cssref/css_selectors.asp) or at [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors).
-Additional high quality reference at [CodeTuts](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) and at [CSS-tricks.com](https://css-tricks.com/almanac/selectors/).
+Feel free to add to this document! Just look cheat sheets up and edit/complete this document!
pedronfigueiredo
committed
0 comments on commit
9b796e4