1. >> Dynamic CSS Selectors

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

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

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

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

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

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

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

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

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

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