15 css selectors
TRANSCRIPT
![Page 1: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/1.jpg)
CSS Selectors How to point to almost anything
![Page 2: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/2.jpg)
Remember the basic style syntax
selector {! property: value;! [property: value …]!}!
![Page 3: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/3.jpg)
With that selector-thingy, you can point to just about anything � A single element � A group of elements � All elements of a type � All descendants of an element � Sibling elements � Just the nth child � The active element � One we're hovering over � …
![Page 4: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/4.jpg)
So why should we learn this stuff?
For ninja-like precision with … � CSS and styles � jQuery
![Page 5: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/5.jpg)
![Page 6: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/6.jpg)
Type selectors point to all elements of a certain type
body {! font-family: Arial Sans-Serif;!}!p {! padding: .5em;!}!
![Page 7: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/7.jpg)
Class selectors allow you to group elements any way you see fit � .className {color: red;}
• To apply a class in HTML <p class="fancy">!• To apply two or more classes <p class="fancy important">!• This will combine the characteristics of both
classes
![Page 8: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/8.jpg)
You can combine types and classes
tr.fancy {! font-family: cursive;!}!p.headline { ! font-size: 4em;! font-family: courier Serif;!}!
![Page 9: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/9.jpg)
Demo: formatting a basic doc Hands-on formatting a basic doc
![Page 10: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/10.jpg)
ID selectors point to exactly one thing
#addButton {! text-align: center;!}!#cancelButton {! color: #777;!}!
![Page 11: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/11.jpg)
Demo: selecting by ID Hands-on selecting by ID
![Page 12: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/12.jpg)
Grouping selectors can add to the organization .headlines{!
font-family:arial;!
color:black;!
background:yellow;!
font-size:14pt;!
}!
.sublines {!
font-family:arial;!
color:black;!
background:yellow;!
font-size:12pt;!
}!
.infotext {!
font-family:arial;!
color:black;!
background:yellow;!
font-size:10pt;!
}!
.headlines, .sublines, .infotext {! font-family:arial; ! color:black; ! background:yellow;!}!!.headlines {font-size:14pt;}!.sublines {font-size:12pt;}!.infotext {font-size: 10pt;}!
![Page 13: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/13.jpg)
Demo: grouping selectors Hands-on grouping selectors
![Page 14: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/14.jpg)
The DOM also points to relationships between elements
� Descendants � Parent � Child � Siblings � Ancestors
![Page 15: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/15.jpg)
Descendant selectors
� ancestor-sel descendant-sel � With a space between them � This will point to ALL descendants of ancestor-
sel div#sidePanel li {! color: blue;!}!
![Page 16: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/16.jpg)
Child selectors � parent > child � Selects only direct children div#sidePanel > p {! text-decoration: bolder;!}!
![Page 17: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/17.jpg)
Adjacent sibling selectors
� sel1 + sel2 � Applies to all sel2 elements that are
immediately after a sel1 element h2 + h3 {! margin: -1em;!}!
![Page 18: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/18.jpg)
Demo: relationship selectors Hands-on relationship selectors
![Page 19: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/19.jpg)
Remember XML attributes?
� Attributes are usually descriptors of an element.
<p class="fancy">!<a href="help.html">!<button value="Click me">!
� You can select elements by HTML attribute
![Page 20: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/20.jpg)
Attribute selectors
� sel[attr] � The attribute is
present img[alt]!button[value]!
• sel[attr="value"] • The attribute is set to
"value" img[src="help.gif"]!
![Page 21: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/21.jpg)
Pseudo-classes for links
� :link – The anchor is a link � :visited – We've visited that link recently � :hover – We're hovering over the link � :active – We're clicking on that link right now
![Page 22: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/22.jpg)
Other pseudo-classes
� :first-child ◦ A child, but just the first one encountered
� :focus ◦ The one the user clicks on or tabs into
![Page 23: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/23.jpg)
Pseudo-elements
� :first-line � Only the first line of a paragraph � :first-letter � Just the first letter � :before and :after p:before { content:url(logo.jpg); }!
![Page 24: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/24.jpg)
Hands-on pseudo-elements
![Page 25: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/25.jpg)
Conclusion
� CSS selectors allow us great flexibility in pointing to elements on a page
� We can use them for styles and with jQuery � We can point to elements by id, class, type, and
DOM location
![Page 26: 15 css selectors](https://reader035.vdocuments.mx/reader035/viewer/2022081719/5560b339d8b42aef3b8b478d/html5/thumbnails/26.jpg)
Further study
� The W3C spec on CSS selectors ◦ http://www.w3.org/TR/CSS2/selector.html
� Good tutorials on CSS selectors ◦ http://css.maxdesign.com.au/selectutorial/ ◦ http://www.echoecho.com/cssselectors.htm