Originally released on zetaNetwork, I thought I'd give Outline a true taste of what zetaNetwork has to offer with this. Enjoy guys and remember, you can find more tuts when we launch
Quote:
CSS Selectors: Make Your Life Easier
Difficulty: Medium Time: N/A Demo: N/A
In this tutorial we will be going over CSS selectors, both well known and obscure. Hopefully you'll learn something new from this so let's get started.
1. * Selects every type of element.
2. #X Selects the element with the id of X.
3. .X Selects every element with the class X.
4. X Selects every element of type X.
5. X Y Selects every child element Y that has a parent X.
6. X:hover Selects X when it is hovered.
7. X:focus Selects X when it is focused.
8. X:active Selects X when it is clicked.
9. X:link If X is a link and the user has not visited the URL X directs to then X will be styled.
10. X:visited If X is a link and the user has already visited the URL X directs to then X will be styled.
11. X:checked Selects X if it is checked.
12. X > Y Selects every Y element that is a direct child of X.
13. X + Y Selects the first Y element that comes directly after element X.
14. X ~ Y Selects every element Y as long as Y comes directly after element X.
15. X[attribute] Selects every element X with the attribute attribute.
16. X[attribute=value] Selects every element X with an attribute attribute that has the value value.
18. X[attribute*=value] Selects every element X that has an attribute attribute whose value contains value.
19. X[attribute^=value] Selects every element X that has the attribute attribute beginning with the value value.
20. X[attribute$=] Selects every element X that has the attribute attribute ending with the value value.
21. X Y:first-child Selects the the first child of type Y from element X.
22. X:first-line Selects the first line of element X.
23. X:first-letter Selects the first letter of element X.
24. X:not(Y) Selects every element X that does not match the selector Y.
25. X Y:nth-child(Z) Selects the Zth child of type Y from the parent X. Note: This is not zero based and as such indices start at one. Values can be specified such as 1, 2, or 3. You can also use n, odd, and even. N would be used for things like 3n or 3n + 2. 3n would select every 3rd child of type Y and 3n + 2 would select every 3rd multiple of type Y + 2. Odd would select every odd element and even would select every even element.
26. X Y:nth-last-child(Z) Basically #25 except starting from the last child.
27. X Y:nth-of-type(Z) Basically #25 except with element types.
28. X Y:nth-last-of-type(Z) Basically #27 except starting from the last child.
That's it, a long list of selectors that you can use to make your life easier when coding CSS. Got a question? Ask it here.
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.