CSS Selector Examples and Notes (check each line carefully and notice differences with other (esp. immediate) lines):
(Reference: CSS: The Definitive Guide: 3rd Edition: by E. A. Mayer:)
- Basic Rules: The following css rules apply to the corresponding html/xml elements/tags (left of { ) as found anywhere in the scope (html/xml files) of these css rules
html {color: black; }
h1 {color: gray; }
h2 {color: silver; }
p {font: medium Helvetica; }
QUOTE {color: gray; }
BIB {color: red; } - Grouping: Applies to all html/xml elements as mentioned before { with commas
h2, p {color: gray; }
body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray; }
h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0. 5em;}
border: 1px solid black; font-family: Charcoal, sans-serif; }
Remember: if you miss a semicolon (;), the rest (not the previous ones) of the css properties will be ignored - Class and ID selectors: Apply to all html/xml elements as mentioned before { with commas
p {font-weight: bold; } : Applies to any p
p.warning {font-weight: normal; } : Apply to any p tags with class set to ‘warning’ : Example: <p class="warning" …
*. warning {font-weight: bold; } : Apply to any html/xml elements with class attributes set to ‘warning’
.warning {font-style: italic; }
span. warning {font-weight: bold; }: only span tags with class attributes set to warning
.warning.urgent {background: silver; }: Apply to elements having both values in class attributes. Example: <p class='warning urgent'
p.warning.help {background: red; }: Example use: <p class="urgent warning help" …. - ID selectors: Apply to elemens having the ID as provided in css class declaration. One document can have only one ID with the same value. Though CSS cannot idenntify that. Using the same ID for multiple elements is a bad practice (will have side-effects with JS/DOM).
*#first-para {font-weight: bold; }: Apply to elements with ID attributes set to first-para:
Example: <p id="lead-para" ….
#lead-para {font-weight: bold; } : is also valid - Attribute selectors: IE7 will support. < = IE6 will not support. Supported by Safari, Opera, and Gecko based browsers
h1[class] {color: silver; } : Apply to any h1 elements with class properties set to anything
planet[ moons] {font-weight: bold; } : Great for XML
*[title] {font-weight: bold; } : Apply to any tags with title attributes
a[href] [title]{font-weight:bold;} : Apply to any a elements with both href and title attributes
a[href=”http: //www.justEtc.net”] {font-weight:bold;} : Apply to any a elements with href attributes set to http://www.justEtc.net
p[ class~=”warning”] {font-weight: bold; }: Apply to any p elements with class attribute values contain ‘warning’
img[ title~=”Figure”] {border: 1px solid gray; } : Apply to any img elements with title attribute values contain ‘Figure’ as a word
[ foo^=”bar”] : begins with “bar”.
[ foo$=”bar”] : ends with “bar”.
[ foo*=”bar”]: having bar as a substring
Particular attribute selectors: *[lang| =”en”] {color: white;} : Apply to any elements whose lang attributes are set to en or begin with en - Selecting descendants
h1 em {color: gray; } : Applies to any em elements at any depth but under h1
ul ol ul em {color: gray; }: Any emphasized text under unordered list that is part of an ordered list that itself is under an unordered list
h1 > strong {color: red; }: Strong immediately after h1 (not to strong at any depth below h1)
h1 + p {margin-top: 0; } : to both h1 and p (as siblings in a document) that have a common parent
html > body table + ul{margin-top: 1. 5em; } : - Pseudo classes:
a: visited {color: red; } : Any visited anchor tags
a: link {} : any anchor tags
a: hover {} : any anchor tags – on mouse over
a: focus {} : any anchor tags – on focus
a: active {} : any anchor tags – on active
a#footer-copyright: visited{font-weight: bold; }: any visited anchor tag with id footer-copyright
p: first-child {font-weight: bold; }
a: visited: hover {color: maroon; }
p: first-letter {color: red; }
p: first-line {color: purple; }
h2: before {content: “] ] “; color: silver; } : styling before h1 elements
body: after {content: ” The End. “; }
From: http://sitestree.com/?p=5282
Categories:79
Tags:
Post Data:2013-01-11 18:25:33
Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada
