Editing Courses/Design & Technique-Essential Web Design/04 (section)

=selectors=
Example http://codepen.io/anon/pen/YGpPyy

CSS selectors allow the selection of html elements to be styled.<br/>
Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.<br/>
To more fine grained selectors, like descendents and id.<br/>
To pseudo class selectors, that are triggered by a certain action.<br/>


==element==
<code>p {font-weight:bold}</code>	
==All(star)==
<code>*</code>. Star targets all the elements in a page <code>p {font-weight:bold}</code>
==id==
<code>#</code>. Id targets the (only 1) element with the given id <code>p#foo {font-weight:bold}</code>.
==class==
<code>.</code>. Class targets several elements that share the same class <code>.bar {color: blue} </code>


==id vs class==
[[File:Class-id.png]]

==descendents==
elements that are descendents another element, like the anchors within a list item, and not other anchors  <code>li a{color:gree;}</code>.
==direct descendents==
elements that '''direct children''' of another element
<code>li > a{color:gree;}</code>.
==pseudo classes==
E.g.
* All links that have been visited <code>a:visited {transform: rotate(0.5turn)}</code>;
* when hoverving a link  <code>a:hover{background: red;}</code>

More on Pseudo Classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes

More on CSS selectors in
* https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors
* https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048