![Attribute selectors
Selector Selects
elem#id Element elem with the ID value id
#id Any element with the ID value id
elem.class All elem elements with the class attribute value class
.class All elements with the class value class
elem[att] All elem elements containing the att attribute
elem[att="text"] All elem elements whose att attribute equals text
elem[att~="text"] All elem elements whose att attribute contains the word text
elem[att|="text"] All elem elements whose att attribute is a hyphen-separated
list of words beginning with text
elem[att^="text"] All elem elements whose att attribute begins with text
[CSS3]
elem[att$="text"] All elem elements whose att attribute ends with text [CSS3]
elem[att*="text"] All elem elements whose att attribute contains the value text
[CSS3]](https://image.slidesharecdn.com/webd162week06cp-150928040338-lva1-app6892/85/Specificity-and-CSS-Selectors-7-320.jpg)
More Related Content
Similar to Specificity and CSS Selectors
Specificity and CSS Selectors
- 1. WEBD 162 Specificity andCSS Selectors
- 2. CSS Rule Recap âąCSS Rule consists of: âą Selector { Declaration Block } âą Declaration Block consists of zero or more Declarations âą Declaration consists of Property: Value pair ending in semicolon ; âą Example: body { color: rgb(91,91,91); background-color: ivory; font-family: Verdana, Geneva, sans-serif; }
- 3. Specificity âą CSS rulesfor an element may appear multiple times within a web page: âą inline, embedded, external âą If there are multiple instances of a CSS rule, which one applies? âą The rule with the highest specificity weight âą If all specificity weights the same, the rule that appears last âą http://www.smashingmagazine.com/2007/07/27/css- specificity-things-you-should-know
- 4. Selector and Specificity âąRead selectors from right to left âą selector âą Which element is going to be affected by the rule? âą The rightmost part of selector is the type of element âą Everything to the left specifies which set of elements that are affected
- 5. Types of selectors âąA contextual selector specifies the context of a matching element âą The type of element âą The position an element is in relation to other elements âą An attribute selector uses an element's attributes and attribute values to target a rule to a specific element âą Common attributes used for targeting are: âą id â can only appear only once in the HTML document âą class â may appear multiple times in the HTML document
- 6. Contextual selectors Selector Description *Matches any element elem Matches the element elem located anywhere in the document elem1, elem2 Matches any of the elements elem1, elem2, etc. parent descendent Matches the descendent element that is nested within the parent element at some level parent > child Matches the child element that is a child of the parent element elem1 + elem2 Matches elem2 that is immediately preceded by the sibling element elem1 elem1 - elem2 Matches elem2 that follows sibling element elem1
- 7. Attribute selectors Selector Selects elem#idElement elem with the ID value id #id Any element with the ID value id elem.class All elem elements with the class attribute value class .class All elements with the class value class elem[att] All elem elements containing the att attribute elem[att="text"] All elem elements whose att attribute equals text elem[att~="text"] All elem elements whose att attribute contains the word text elem[att|="text"] All elem elements whose att attribute is a hyphen-separated list of words beginning with text elem[att^="text"] All elem elements whose att attribute begins with text [CSS3] elem[att$="text"] All elem elements whose att attribute ends with text [CSS3] elem[att*="text"] All elem elements whose att attribute contains the value text [CSS3]
- 8. How to calculatespecificity of a rule Weight Multiply by 1 # of element names or pseudo elements 10 # of classes or pseudo class 100 id selector 1000 If an in-line rule Special cases: âą Universal attribute * = 0 âą !important overrides all âą If two rules have the same specificity weight, the last one applies âą Visual Specificity Calculator: http://specificity.keegan.st/
- 9. Example:Hierarchy of PageElements body article header h1 p p p p p aside h1 p
- 10. âCodeâ for ContextSelector example <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body>
- 11. Contextual Selector: * body article header h1p p p p p aside h1 p Affected elements indicated by red shadow
- 12. Contextual Selector: * <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affectedelements in red Affects all elements (wildcard)
- 13. Contextual Selector: p body article header h1p p p p p aside h1 p Affected elements indicated by red shadow
- 14.
- 15. Contextual Selector: articlep body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 16. Contextual Selector: articlep <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects any p element that is a descendant of an article element
- 17. Contextual Selector: article> p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 18. Contextual Selector: article> p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects any p element that is a child of an article element
- 19. Contextual Selector: h1,p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 20. Contextual Selector: h1,p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects any h1 or p element
- 21. Contextual Selector: h1+ p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 22. Contextual Selector: h1+ p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects a p element that immediately follow an h1 element
- 23. Contextual Selector: articleh1 + p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 24. Contextual Selector: articleh1 + p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects a p element that immediately follows any h1 element that is a descendant of an article element
- 25. Contextual Selector: h1- p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 26. Contextual Selector: h1- p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects any p element that is a sibling that follows after any h1 element
- 27. Contextual Selector: articleh1 - p body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 28. Contextual Selector: articleh1 - p <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red Affects any element that is a child of an article element
- 29. Contextual Selector: article> * body article header h1 p p p p p aside h1 p Affected elements indicated by red shadow
- 30. Contextual Selector: article> * <body> <article> <header> <h1></h1> <p></p> <p></p> </header> <p></p> <p></p> <p></p> </article> <aside> <h1></h1> <p></p> </aside> </body> Affected elements in red
Editor's Notes
- #7Â >: Stylinâ p.38 *: Stylinâ p.45 +: Stylinâ p.45-46 Figure 2.15, the <p> immediately after the <h1> has the rule applied []: Stylinâ p.46
- #8Â >: Stylinâ p.38 *: Stylinâ p.45 +: Stylinâ p.45-46 Figure 2.15, the <p> immediately after the <h1> has the rule applied []: Stylinâ p.46
- #9Â Specificity.html DW Code Navigator: ALT-CMD-CLICK (Mac) DW Webkit engine (Open Source, same base as Safari)