>> More on CSS Selectors

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

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

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

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

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

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

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

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

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

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

Next on Web-based Systems Dynamic Selectors in CSS Details on Selectors and Properties http://css-tricks.com/almanac/