diff options
| author | awalGarg <aakarsh1997@gmail.com> | 2015-02-19 00:15:12 +0530 |
|---|---|---|
| committer | awalGarg <aakarsh1997@gmail.com> | 2015-02-19 00:15:12 +0530 |
| commit | e1667cc836cc1b5f43404c0d54c02d38d9480ec8 (patch) | |
| tree | 2aba4213c5dc270ef4dd4152347c8243564650a0 /css.html.markdown | |
| parent | a1d966618b4892c47d53eff278a664b77af65259 (diff) | |
corrected definition of ~ selector, added |
[attr~='foo'] will not select <el attr="foobar">, it will only select <el attr="bar foo baz">
Also added definition for [attr|='pre'] style selector
Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors, http://jsfiddle.net/awalGarg/72k3ptsk/
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 9 |
1 files changed, 6 insertions, 3 deletions
diff --git a/css.html.markdown b/css.html.markdown index b93c2842..9e8664b3 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -43,7 +43,7 @@ You can target all elements on the page using asterisk! */ /* 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' otherAttr='en-us foo bar' /> */ /* you can target it by its name */ @@ -70,8 +70,11 @@ div { } /* or ends with (CSS3) */ [attr$='ue'] { font-size:smaller; } -/* or even contains a value (CSS3) */ -[attr~='lu'] { font-size:smaller; } +/* or select by one of the values from the whitespace separated list (CSS3) */ +[otherAttr~='foo'] { font-size:smaller; } + +/* or value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } /* and more importantly you can combine these together -- there shouldn't be |