>> 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 “,”

Sample File DOM Tree Web-based Systems | Misbhauddin 4 HTML BODY

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: * Web-based Systems | Misbhauddin 5 Select and color all elements Try Now

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 Web-based Systems | Misbhauddin 6 Select the label element with class required and color it red. Try Now

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 Web-based Systems | Misbhauddin 7 Select and color all paragraph descendants of the div tag with id “first-div” Try Now

Child Selector It means "select elements that are direct descendants only“ USAGE: > between two selectors – Example: div > p Web-based Systems | Misbhauddin 8 Select and color all paragraph children of the div tag with id “first-div” Try Now

General Sibling Selector This selects elements at the same hierarchy level USAGE: ~ between two selectors – Example: div ~ p Web-based Systems | Misbhauddin 9 Select and color all paragraph siblings of the div tag with id “nested-div” Try Now

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 Web-based Systems | Misbhauddin 10 Select and color the paragraph sibling of the div tag with id “first-div” Try Now

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”] Web-based Systems | Misbhauddin 11 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

DYNAMIC STYLING IN CSS Advanced CSS Selectors Web-based Systems | Misbhauddin 12

Can be done by CSS for specific cases Also called Pseudo selectors Web-Based Systems - Misbhauddin 13 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.LINK 2.FORM

Link States Web-Based Systems - Misbhauddin 14 LINK Page loads HOVER Mouse Over Move out ACTIVE Click [Button Pressed] VISITED Clicked [Button Released] Mouse Over Mouse Out Link Pseudo Class Selector

Use “:” after the selector – LINK State a:link {} – VISITED State a:visited {} – HOVER State a:hover {} – ACTIVE State a:active {} Web-Based Systems - Misbhauddin 15 Specifying them in order is ideal Easy way to cover them all: LOVE/HATE Link Pseudo Class Selector L :link O V :visited E H :hover A :active T E Weight is equal to a class selector

TRY NOW Web-Based Systems - Misbhauddin 16 Style the hyperlink with the following specifications Link: red Visited: green Hover: blue Active: yellow Use attribute color HINTS:

Use “:” after the input selector – :hover – :focus – :required – :valid – :invalid Web-Based Systems - Misbhauddin 17 Form Pseudo Class Selectors

TRY NOW Web-Based Systems - Misbhauddin 18 For the 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

Use “::” after the selector – ::first-line – ::first-letter Web-Based Systems - Misbhauddin 19 Some Pseudo Element Selectors

TRY NOW Web-Based Systems - Misbhauddin 20 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, tags and CSS code Details on Selectors and Properties –