Download presentation
Presentation is loading. Please wait.
Published byElizabeth Crosswell Modified over 10 years ago
1
Today’s objectives Element relations – tree structure Pseudo classes Pseudo elements
2
TYPES OF SELECTORS CSS
3
Types of selectors Tag or HTML Selectors: Page-Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements The Universal Selector (Asterisk) * { font-weight: bold; }
4
Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}
5
Types of selectors | Classes Classes (applies to more than one type of element).mytext {font-family: Verdana; font-size: 14px;} Hello World Learning CSS
6
Types of selectors | ID ID selectors identify: Major sections Unique content | a rule to ONE element on a page. Configured with #idname #banner { background-color : #FF00FF;}
7
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
8
HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.
9
HTML Tree
10
HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and Ancestor to
11
HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and Ancestor to
12
HTML Tree Ancestor: tag that wraps around another tag. ancestor of all other tags Descendent: A tag inside one or more tags. Parent: tag’s closest ancestor HOME Child: tag directly enclosed by another tag. HOME…
13
HTML Tree Sibling: tags that are children of same tag. Siblings
14
Pseudo-class| :first-child :first-child the first of all children an OL may have. ol li:first-child { font-size:1.2em; } Item 1 Item 2 Item 3
15
Selectors | Context | Descendent Descendent selector context h1 strong { color: red; } Any tag inside a level 1(h1) is red, but other instances of the tag on the page not affected. li a { font-family: Arial; } Any tag inside a line item is Arial font, but other instances of the tag on the page not affected.
16
Specificity | Descendent selectors Specific descendent selectors override less specific selectors li a {color : green;} All anchors in line items are green ol li a {color : blue;} Only anchors in line item in Ordered lists are blue
17
Selectors | Descendent selectors p.intro { color : red;} Hello World Any paragraph with.intro class will be Red. p.intro {color : red;} Hello World Any tag with.intro class that is wrapped in a tag will be Red. NO SPACE SPACE
18
Child selectors div > h1 {color : blue; } All heading 1 that are children of div will be blue. Hello world Hello everyone
19
Adjacent Siblings A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.
20
Attribute Selectors Format a tag based on any attributes it has. img[title] {border : solid 4px #EFEFEF;} All images with a title attribute will have a border
21
Attribute Selectors li img[title] {border : solid 4px #EFEFEF;} All images that are line items with a title attribute will have a border
22
Attribute Selectors Can be used with classes.hiLight[title] {color : red;} 186,000 MPS Tags using.hiLight class and title attribute are red
23
Attribute Selectors | ^ and $ Format external links: a[href^="http://"] { color : yellow; } ^ - begins with Any link that begins with “http://” is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.
24
Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;} All images where src attribute contains “_Ire” get a green, solid border.
25
Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}
26
Pseudo-Classes A way of selecting parts of a HTML document, based not on HTML document tree and its elements or on characteristics (e.g., name, attributes or contents) but on other conditions like dynamic state of an element. CSS2 expanded on virtual conceptual document components such as first-child. Source: http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
27
Pseudo-Classes :focus|input:focus {background-color : red;} a:link| a:link { color : #EFEFEF; } a:visited | a:visited { color : #CCCCCC; } a:hover| a:hover { color : # F33333; } a:active | a:active {color : #B2F511;} Hover: (these will also work) h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }
28
Pseudo-Classes Proper way to order four link pseudo-classes: 1. a:link { color: #F60; } 2. a:visited { color: #900; } 3. a:hover { color: #F33; } 4. a:active {color: #B2F511; } If order is changed, the hover and active don’t work.
29
PSEUDO-ELEMENTS Allow you to set style on a part of an element's content. Allow logical elements to be defined that are not in the document tree (:first-letter). Logical elements allow implied semantic structure to be addressed in CSS selectors. Source: http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
30
PSEUDO-ELEMENTS | Restrictions Cannot be applied to in-line styles. May only appear at the end of a selector chain (after the subject of the selector). Should come after any class or ID names found in the selector. Only one pseudo-element can be specified per selector. Source: http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
31
Pseudo-elements :first-letter – p:first-letter {font-size : 2em; font-weight: bold; color: red;} :first-line – p:first-line {font-size : 2em; font-weight: bold; color: red;}.hiLite:first-line { text-transform: uppercase; }
32
Pseudo-element | :before :before Adds content before an element. p:before {content : "ON SPECIAL! " } p.onSpecial:before {content : "ON SPECIAL! “; color : red;}
33
Pseudo-element | :after :after Adds content after an element p:after {content: url(bullet_Ire.png);} p.tip:after {content: url(bullet_Ire.png);}
34
Selectors http://gallery.theopalgroup.com/selectoracle/ http://gallery.theopalgroup.com/selectoracle/ Type selectors to understand why they do
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.