>> Dynamic CSS Selectors

Pre-requisite Download and open the file called selectors-dynamic.html Open the file in the editor

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

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

Link Pseudo Class Selector 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 ideal Easy way to cover them all: LOVE/HATE L :link O V :visited E H :hover A :active T E Weight is equal to a class selector Web-Based Systems - Misbhauddin

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

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

Web-Based Systems - Misbhauddin TRY NOW 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 For the password input type required: border color to red Use attribute background-color border: 5px solid black border-color HINTS: Web-Based Systems - Misbhauddin

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

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

Next on Web-based Systems Cascading Style Sheets - Rules 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/