15 css selectors
Post on 24-May-2015
663 Views
Preview:
TRANSCRIPT
CSS Selectors How to point to almost anything
Remember the basic style syntax
selector {! property: value;! [property: value …]!}!
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 � …
So why should we learn this stuff?
For ninja-like precision with … � CSS and styles � jQuery
Type selectors point to all elements of a certain type
body {! font-family: Arial Sans-Serif;!}!p {! padding: .5em;!}!
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
You can combine types and classes
tr.fancy {! font-family: cursive;!}!p.headline { ! font-size: 4em;! font-family: courier Serif;!}!
Demo: formatting a basic doc Hands-on formatting a basic doc
ID selectors point to exactly one thing
#addButton {! text-align: center;!}!#cancelButton {! color: #777;!}!
Demo: selecting by ID Hands-on selecting by ID
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;}!
Demo: grouping selectors Hands-on grouping selectors
The DOM also points to relationships between elements
� Descendants � Parent � Child � Siblings � Ancestors
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;!}!
Child selectors � parent > child � Selects only direct children div#sidePanel > p {! text-decoration: bolder;!}!
Adjacent sibling selectors
� sel1 + sel2 � Applies to all sel2 elements that are
immediately after a sel1 element h2 + h3 {! margin: -1em;!}!
Demo: relationship selectors Hands-on relationship selectors
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
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"]!
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
Other pseudo-classes
� :first-child ◦ A child, but just the first one encountered
� :focus ◦ The one the user clicks on or tabs into
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); }!
Hands-on pseudo-elements
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
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
top related