attribute selector provides a way to select HTML elements either by the

Attribute selector provides a way to select html

This preview shows page 7 - 11 out of 16 pages.

attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute , [title] { … } Selectors: Attribute Selectors <head> <meta charset="utf-8"> <title>Share Your Travels</title> <style> [title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none; } </style> </head> <body> <div> <img src="images/flags/CA.png" title="Canada Flag" /> <h2><a href="countries.php?id=CA" title="see posts from Canada” > Canada</a></h2> <p>Canada is a North American country consisting of … </p> <div> <img src="images/square/6114907897.jpg” title="At top of Sulphur Mountain" /> <img src="images/square/6592317633.jpg” title="Grace Presbyterian Church" /> <img src="images/square/6592914823.jpg” title="Calgary Downtown" /> </div> </div> </body>
Image of page 7
8 Selectors: Attribute Selectors Selector Matches [] A specific attribute. [=] A specific attribute with a specific value. [~=] A specific attribute whose value matches at least one of the words in a space delimited list of words. [^=] A specific attribute whose value begins with a specified value. [*=] A specific attribute whose value contains a substring. [$=] A specific attribute whose value ends with a specified value. Selectors: Pseudo-Element and Pseudo-Class Selectors , A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable selectable object. , A pseudo-class selector does apply to an HTML element, but targets either a particular state or, in CSS3, a variety of family relationships. Selectors: Pseudo-Element and Pseudo-Class Selectors a:link a:visited :focus :hover :active :checked :first-child :first-letter :first-line Selectors: Pseudo-Element and Pseudo-Class Selectors <style> a:link { text-decoration: underline; color: blue; } a:visited { text-decoration: underline; color: purple; } a:hover { text-decoration: none; font-weight: bold; } a:active { background-color: yellow; } </style>
Image of page 8
9 Selectors: Contextual Selectors Selector Matches Example Descendant A specified element that is contained somewhere within another specified element. div p Selects a <p> element that is contained somewhere within a <div> element. Child A specified element that is a direct child of the specified element. div>h2 Selects an <h2> element that is a child of a <div> element. Adjacent Sibling A specified element that is the next sibling (i.e., comes directly after) of the specified element h3+p Selects the first <p> after any <h3>. General Sibling A specified element that shares the same parent as the specified element. h3~p Selects all the <p> elements that share the same parent as the <h3>. Selectors: Contextual Selectors Why is this purple and not red? The Cascade: How Styles Interact The Cascade: How Styles Interact , The “Cascade” in CSS refers to how conflicting rules are handled. , The downward movement of water down a cascade is meant to be analogous to how a given style rule will continue to take precedence with child elements , CSS uses the following cascade principles to help it deal with conflicts: inheritance, specificity, and location
Image of page 9
10 The Cascade: Inheritance , Many (but not all) CSS properties affect not only themselves but their descendants as well.
Image of page 10
Image of page 11

You've reached the end of your free preview.

Want to read all 16 pages?

  • Fall '09
  • KUNZ
  • Cascading Style Sheets, Box Model

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture