Created
January 12, 2012 20:40
-
-
Save jackilyn/1602963 to your computer and use it in GitHub Desktop.
CSS Selectors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Adjacent Selector | |
| * It will select only the element that is immediately preceded by the former element. | |
| * ------------------------------ */ | |
| /* First preceding element only */ | |
| ul + p { | |
| color: red; | |
| } | |
| /* All preceding elements */ | |
| h1 ~ p { | |
| text-indent:20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Attribute Selectors | |
| * ------------------------------ */ | |
| /* <a> with attribute `attr` */ | |
| a[attr] { | |
| color: red; | |
| } | |
| img[alt] { | |
| border:1px dotted red; | |
| } | |
| /* style any link with a href attribute ending with `pdf` */ | |
| a[href$=".pdf"] { | |
| color: red; | |
| } | |
| /* style any link with a href attribute starting with `http` */ | |
| a[href^="http"] { | |
| background: url(path/to/external/icon.png) no-repeat; | |
| padding-left: 10px; | |
| } | |
| /* Finds an element whose attribute value contains the supplied string */ | |
| a[href*="jackilyn"] { | |
| color: purple; | |
| } | |
| /* Finds attribute on the selected element and takes a space separated list of values, each of which can be styled differently. */ | |
| a[attr~="rawr meow"] { | |
| font-weight: bold; | |
| } | |
| a[attr~="rawr"] { | |
| color: red | |
| } | |
| a[attr~="meow"] { | |
| color: blue; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div > span { | |
| color: red; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* First child element */ | |
| :first-child { | |
| } | |
| /* First line of element */ | |
| :first-line { | |
| } | |
| /* First letter of element */ | |
| :first-letter { | |
| } | |
| /* Element with mouse over */ | |
| :hover { | |
| } | |
| /* Active element */ | |
| :active { | |
| } | |
| /* Element with focus */ | |
| :focus { | |
| } | |
| /* Unvisited links */ | |
| :link { | |
| } | |
| /* Visited links */ | |
| :visited { | |
| } | |
| /* Element with language `var` */ | |
| :lang(var) { | |
| } | |
| /* Before element */ | |
| :before { | |
| } | |
| /* After element */ | |
| :after { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment