Multi
Multi
CSS Selectors: Make Your Life Easier
Topic Started: Tuesday, 26. April 2011, 18:42 (389 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
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 :P

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.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Ah, nice list. Thanks for sharing this.
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.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Thanks Xerxes, hopefully more people will find it easier to theme with this list.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
jackie
Member Avatar
Level 10
Outline Documentations
G E N E R A L

Documentation accepted in to the General database

Quote:
 

[9:15:40 PM] Michael: penis is salty
[9:15:42 PM] Michael: with a bit of tang
[9:15:48 PM] Michael: :|
[9:15:53 PM] Cody: erm
[9:15:55 PM] Jackie Chen: uhm
[9:16:02 PM] Justin Bieber: ......
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Fool, this is a doc on theming how did it get into the general section o.O
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..