eg-146:lecture15
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture15 [2012/03/15 19:55] – [Combining selectors] eechris | eg-146:lecture15 [2012/03/15 20:25] – [Selecting sibling elements] eechris | ||
---|---|---|---|
Line 471: | Line 471: | ||
To illustrate the various style selectors, and how the work, | To illustrate the various style selectors, and how the work, | ||
- | we apply the simple style declaration '' | + | we apply the simple style declaration '' |
Follow the links to [[http:// | Follow the links to [[http:// | ||
to see these examples live. | to see these examples live. | ||
Line 483: | Line 483: | ||
<meta charset=" | <meta charset=" | ||
< | < | ||
- | <link rel=" | + | <link rel=" |
</ | </ | ||
< | < | ||
- | <article id=" | + | <article id=" |
<h1 lang=" | <h1 lang=" | ||
- | | ||
<p> | <p> | ||
- | Many tourists are drawn to Barcelona to see Antoni Gaud& | + | Many tourists are drawn to Barcelona to see Antoni Gaud& |
architecture. | architecture. | ||
</p> | </p> | ||
<p> | <p> | ||
- | Barcelona <a href=" | + | Barcelona <a href=" |
</p> | </p> | ||
- | | ||
<section class=" | <section class=" | ||
<h2 lang=" | <h2 lang=" | ||
<p> | <p> | ||
- | Gaud& | + | Gaud& |
building and < | building and < | ||
</p> | </p> | ||
</ | </ | ||
- | | ||
<section class=" | <section class=" | ||
<h2 lang=" | <h2 lang=" | ||
<p> | <p> | ||
- | The complicatedly named and curiously unfinished Expiatory Temple of the | + | The complicatedly named and curiously unfinished Expiatory Temple of the |
Sacred Family is the < | Sacred Family is the < | ||
</p> | </p> | ||
Line 515: | Line 512: | ||
</ | </ | ||
</ | </ | ||
+ | |||
</ | </ | ||
Line 522: | Line 520: | ||
===== A Catalogue of style selectors ===== | ===== A Catalogue of style selectors ===== | ||
+ | I will demonstrate these in the lecture. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | My cheat-sheet: | ||
+ | |||
+ | - Select by name: name.css | ||
+ | - Select by class: class.css | ||
+ | - Select by id: classid.css | ||
+ | - Select by context: context.css | ||
+ | - Selecting elements by parent: child.css | ||
+ | - Selecting the first child element: firstchild.css | ||
+ | - Selecting the first child element: firstchild2.css | ||
+ | - Selecting sibling elements: adjsibling.css | ||
+ | - Pseudo-elements: | ||
+ | - Pseudo-elements: | ||
+ | - Pseudo-elements: | ||
+ | - Selecting Elements based on Attributes: attribute.css | ||
+ | - Selecting groups of elements: group.css | ||
+ | - Combining selectors: combine.css | ||
===== Selecting elements by name ===== | ===== Selecting elements by name ===== | ||
Line 627: | Line 645: | ||
'' | '' | ||
===== Selecting sibling elements ===== | ===== Selecting sibling elements ===== | ||
- | * This selector chooses only those '' | + | * This selector chooses only those '' |
<code css> | <code css> | ||
Line 696: | Line 714: | ||
<code css> | <code css> | ||
- | h1, h2 { color: red; } | + | h1, |
+ | h2 { | ||
+ | | ||
+ | } | ||
</ | </ | ||
+ | ---- | ||
+ | |||
+ | The selectors do not need to be on a line of their own, but many developers use this convention as | ||
+ | it makes the style definition (and what elements it applies to) easier to read at a glance. Particularly | ||
+ | when there are a lot! | ||
===== Combining selectors ===== | ===== Combining selectors ===== | ||
- | * You can also combine selectors each you need to be particularly precise ([[/ | + | * You can also combine selectors each you need to be particularly precise ([[/ |
<code css> | <code css> | ||
- | div.works p em: | + | .project h2[lang|=" |
+ | | ||
+ | } | ||
</ | </ | ||
- | Explanation | + | ---- |
- | This selector chooses | + | |
- | It doesn't seem to work! | + | **Explanation** "Chose only the '' |
+ | have a '' | ||
+ | |||
+ | The example above is an extreme one to demonstrate what's possible. Following are | ||
+ | a few ways you could achieve the same results, moving from least specific | ||
+ | specific: | ||
+ | <code css> | ||
+ | em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | .project em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | .about .project em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | <code css> | ||
+ | #gaudi em { | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Summary ====== | ||
+ | |||
+ | * [[#CSS Building Blocks]] | ||
+ | * [[#Working With Stylesheets]] | ||
+ | * [[#Defining Selectors]] | ||
+ | |||
+ | ===== Next ===== | ||
+ | |||
+ | * Formatting Text with Styles | ||
+ | * Layout with Styles | ||
eg-146/lecture15.txt · Last modified: 2012/03/19 08:15 by eechris