iskm/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-23 09:41:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update css.html.markdown

Browse Source
This commit is contained in:
Matt Lucas 2014-05-01 13:02:04 -04:00
parent 61309e0edf
commit 4095671c92
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css.html.markdown
View File

@ -44,16 +44,16 @@ Given an element like this on the page:
<div class='some-class class2' id='someId' attr='value' /> <div class='some-class class2' id='someId' attr='value' />
*/ */
/* you can target it by a class name */ /* you can target it by its name */
.some-class { } .some-class { }
/*or by both classes! */ /*or by both classes! */
.some-class.class2 { } .some-class.class2 { }
/* or by it's tag name */ /* or by its element name */
div { } div { }
/* or it's id */ /* or its id */
#someId { } #someId { }
/* or by the fact that it has an attribute! */ /* or by the fact that it has an attribute! */
@ -77,12 +77,12 @@ any spaaace between different parts because that makes it to have another
meaning.*/ meaning.*/
div.some-class[attr$='ue'] { } div.some-class[attr$='ue'] { }
/* you can also select an element based on how it's parent is.*/ /* you can also select an element based on its parent.*/
/*an element which is direct child of an element (selected the same way) */ /*an element which is direct child of an element (selected the same way) */
div.some-parent > .class-name {} div.some-parent > .class-name {}
/* or any of it's parents in the tree */ /* or any of its parents in the tree */
/* the following basically means any element that has class "class-name" /* the following basically means any element that has class "class-name"
and is child of a div with class name "some-parent" IN ANY DEPTH */ and is child of a div with class name "some-parent" IN ANY DEPTH */
div.some-parent .class-name {} div.some-parent .class-name {}
@ -91,7 +91,7 @@ div.some-parent .class-name {}
can you say what? */ can you say what? */
div.some-parent.class-name {} div.some-parent.class-name {}
/* you also might choose to select an element based on it's direct /* you also might choose to select an element based on its direct
previous sibling */ previous sibling */
.i-am-before + .this-element { } .i-am-before + .this-element { }
@ -99,7 +99,7 @@ previous sibling */
.i-am-any-before ~ .this-element {} .i-am-any-before ~ .this-element {}
/* There are some pseudo classes that allows you to select an element /* There are some pseudo classes that allows you to select an element
based on it's page behaviour (rather than page structure) */ based on its page behaviour (rather than page structure) */
/* for example for when an element is hovered */ /* for example for when an element is hovered */
:hover {} :hover {}