>> More on CSS Selectors

Pre-requisite• Open the file called sample.txt• Copy the all the text from the file• Open your browser and go to codepen.io• Paste the text in HTML section

Recall• Types of Selectors– Element/Type Selector– ID Selector (#)– Class Selector (.)

• Combining Selectors– Use a “,”

Web-based Systems | Misbhauddin 4

Sample File DOM Tree

<div id =“first-div”>

<p class=“first”> <p>

<p class=“first”> <a>

HTML BODY

<h2>

<div id=“nested-div”>

<p>

Web-based Systems | Misbhauddin 5

Universal Selector

• Universal selector is used when you want to apply the style to all elements within the page.– It does not have any weight

• USAGE: *

Select and color all elements Try Now

Web-based Systems | Misbhauddin 6

Within Selector

• This is used to select selectors that are either within or beside each other – No space between the name

• USAGE EXAMPLE: div.test

Select the label element with class required and color it red.Try Now

Web-based Systems | Misbhauddin 7

Descendant Selector

• Descendant means anywhere nested within it in the DOM tree– Could be a direct child, could be five levels deep, it

is still a descendant• USAGE: white space between two selectors

Select and color all paragraph descendants of the div tag with id “first-div”

Try Now

Web-based Systems | Misbhauddin 8

Child Selector

• It means "select elements that are direct descendants only“

• USAGE: > between two selectors– Example: div > p

Select and color all paragraph children of the div tag with id “first-div”

Try Now

Web-based Systems | Misbhauddin 9

General Sibling Selector

• This selects elements at the same hierarchy level

• USAGE: ~ between two selectors– Example: div ~ p

Select and color all paragraph siblings of the div tag with id “nested-div”

Try Now

Web-based Systems | Misbhauddin 10

Adjacent Sibling Selector

• This means is "select a tag that is directly after another given tag (with nothing in between)“

• USAGE: + between two selectors– Example: div + p

Select and color the paragraph sibling of the div tag with id “first-div”

Try Now

Web-based Systems | Misbhauddin 11

Attribute Selector

• This means is “select a tag when the attribute value is equal to the specified value“– Weight is equal to a class selector

• USAGE: tag[attribute=“value”]– Example: input[type=“text”]

For the input with type password, set the color to green

Try Now

[prop = value] Exactly equal to the value[prop *= value] Contains value somewhere[prop ^= value] Begins with value[prop $= value] Ends with value

Web-based Systems | Misbhauddin 12

DYNAMIC STYLING IN CSSAdvanced CSS Selectors

Web-Based Systems - Misbhauddin 13

• Can be done by CSS for specific cases• Also called Pseudo selectors

Styling Dynamically

Types of Pseudo Selectors

Pseudo-Class Selectors Pseudo-Element Selectors

Apply styles to part of other actual elements that cannot be shown in the DOM tree

Select elements that can't be expressed using attributes, IDs or classes

1. LINK2. FORM

Web-Based Systems - Misbhauddin 14

Link States

LINK

Page loads

HOVER

Mouse Over

Move out

ACTIVE

Click [Button Pressed]

VISITED

Clicked [Button Released]

Mouse Over

Mouse Out

Link Pseudo Class Selector

Web-Based Systems - Misbhauddin 15

• Use “:” after the selector– LINK State

• a:link {}

– VISITED State• a:visited {}

– HOVER State• a:hover {}

– ACTIVE State• a:active {}

Specifying them in order is idealEasy way to cover them all:

LOVE/HATE

Link Pseudo Class Selector

L :linkOV :visitedEH :hoverA :activeTEWeight is equal to a class selector

Web-Based Systems - Misbhauddin 16

TRY NOWStyle the hyperlink with the following specifications

• Link: red• Visited: green• Hover: blue• Active: yellow

Use attribute color

HINTS:

Web-Based Systems - Misbhauddin 17

• Use “:” after the input selector– :hover– :focus– :required– :valid– :invalid

Form Pseudo Class Selectors

Web-Based Systems - Misbhauddin 18

TRY NOWFor the email input type

• Invalid: background color to red• Valid: background color to green• Hover: background color to yellow• Focus: outline 1px solid black

Use attribute background outline: 5px solid black border-color

HINTS:

For the password input type• required: border color to red

Web-Based Systems - Misbhauddin 19

• Use “::” after the selector– ::first-line– ::first-letter

Some Pseudo Element Selectors

Web-Based Systems - Misbhauddin 20

TRY NOW

Use attribute font-size

HINTS:

For the all paragraphs• first-letter: font size to 30px

Next on Web-based Systems

• Cascading Style Sheets– The “Box Model” in CSS– Using to format the layout of an HTML page• Using <div>, <span> tags and CSS code

• Details on Selectors and Properties– http://css-tricks.com/almanac/