1. >> More on CSS Selectors

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

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

4. Web-based Systems | Misbhauddin
Sample File DOM Tree
HTML BODY
<h2>
<div id =“first-div”>
<p class=“first”>
<a>
<a>
<div id=“nested-div”>
<p class=“first”>
<p>
<p>
<p>
Web-based Systems | Misbhauddin

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

6. Web-based Systems | Misbhauddin
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. Web-based Systems | Misbhauddin
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. Web-based Systems | Misbhauddin
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. Web-based Systems | Misbhauddin
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”]
[prop = value]
Exactly equal to the value
[prop *= value]
Contains value somewhere
[prop ^= value]
Begins with value
[prop $= value]
Ends with value
For the hyperlink element with the word “kfu” within the href attribute, set the color to green
Try Now
Web-based Systems | Misbhauddin

12. Next on Web-based Systems
Dynamic Selectors in CSS
Details on Selectors and Properties