1. >> More on CSS Selectors

2. 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

3. Recall Types of Selectors – Element/Type Selector – ID Selector (#) – Class Selector (.) Combining Selectors – Use a “,”

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

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

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

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

8. 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

9. 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

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

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”] 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

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

13. 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

14. 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

15. 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

16. 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:

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

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

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

20. TRY NOW Web-Based Systems - Misbhauddin 20 Use attribute font-size HINTS: For the all paragraphs first-letter: font size to 30px

21. 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 – http://css-tricks.com/almanac/ http://css-tricks.com/almanac/