Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements

TYPES OF SELECTORS CSS

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; }

Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

Types of selectors | Classes  Classes (applies to more than one type of element).mytext {font-family: Verdana; font-size: 14px;} Hello World Learning CSS

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;}

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

HTML Tree

HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and Ancestor to

HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and Ancestor to

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…

HTML Tree  Sibling: tags that are children of same tag. Siblings

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

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.

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

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

Child selectors  div > h1 {color : blue; }  All heading 1 that are children of div will be blue. Hello world Hello everyone

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.

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

Attribute Selectors li img[title] {border : solid 4px #EFEFEF;} All images that are line items with a title attribute will have a border

Attribute Selectors  Can be used with classes.hiLight[title] {color : red;} 186,000 MPS Tags using.hiLight class and title attribute are red

Attribute Selectors | ^ and $ Format external links: a[href^=" { color : yellow; } ^ - begins with Any link that begins with “ is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}  All images where src attribute contains “_Ire” get a green, solid border.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}

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:

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; }

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.

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:

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:

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; }

Pseudo-element | :before  :before  Adds content before an element. p:before {content : "ON SPECIAL! " } p.onSpecial:before {content : "ON SPECIAL! “; color : red;}

Pseudo-element | :after  :after  Adds content after an element  p:after {content: url(bullet_Ire.png);}  p.tip:after {content: url(bullet_Ire.png);}

Selectors   Type selectors to understand why they do