mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 09:41:36 +00:00
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/
This commit is contained in:
parent
a1d966618b
commit
e1667cc836
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user