Module 2
2.4 CSS Selectors and Specificity
CSS selectors are like magic markers that tell the browser which elements to style! π¨
The Universal Selector (*) styles all elements on the webpage. Think of it like a "Select All" button for CSS!
β¨ Example:Β
π What happens?
All the text on the page turns purple and uses the Arial font!
Open an HTML file.
Add this CSS.
Watch as everything on your page follows these styles!
Instead of styling everything, you can target specific elements like <h1>, <p>, or <div>.
β¨ Example:Β
π What happens?
All <h1> elements turn blue and get centered.
All <p> elements become bigger and turn dark red.
πΉοΈ Try This Fun Challenge! π―Β
2οΈβ£ Now, style it using CSS:Β
rem (relative to the root font size)Β
π₯ What happens? Run the code and see the magic! π©β¨Β
β Universal Selector (*) β Styles everything
β Element Selector (h1, p, div, etc.) β Styles specific elements
π¨ Try these out and let me know how it goes! π
CSS selectors let you target elements in different ways! Let's explore ID, Class, and Attribute Selectors with interactive examples.
1οΈβ£ ID Selector (#) β Targets one unique element
Each ID must be unique on a page.Β
πΉ Example:Β
π Try It: Change the ID name in CSS and HTML to see what happens!Β
Classes are reusable, so multiple elements can share the same class.
πΉ Example:Β
π Try It: Apply multiple classes to an element!Β
Use this when styling input fields, links, or any attribute-based elements.
πΉ Example:Β
π Try It: Change the attribute value and see how styles apply!Β
An id is like a name tag for one special element. It helps CSS find and style that one unique thing on your page!
π How to Use idΒ
1οΈβ£ Give an element an id in HTML:Β
2οΈβ£ Style it in CSS using #:Β
β Now, only this one paragraph turns blue and gets bigger! πΒ
β Donβt use the same id for many elements!
β Use id when styling one unique element.
CSS helps us style elements inside other elements. But do we want to style ALL inner elements or ONLY the direct children? Letβs see the difference!
Β 1οΈβ£ Descendant Selector (space)
π― Styles ALL matching elements inside a parent, no matter how deep!
β ALL <p> inside <div> will turn red!Β
πΉ HTML:Β
2οΈβ£ Direct-Descendant Selector (>)Β
π― Styles ONLY the first-level children (not deeply nested ones).Β
β ONLY <p> directly inside <div> turns blue.Β
div p {} β Styles ALL <p> inside <div>
div > p {} β Styles ONLY direct <p> inside <div>
CSS gives us special tools to style elements in unique situations or parts of elements that we normally can't style directly. These are called Pseudo-Classes and Pseudo-Elements!
π― Pseudo-classes let us style elements based on their state (like when a user hovers over them) or position (like the first child of a parent).
β This will change the buttonβs background to green when the mouse hovers over it!Β
β The first <li> inside any <ul> will be bold!Β
Try It Yourself:
Change the state of the button by adding the: hover pseudo-class in your CSS!
π― Pseudo-elements allow us to style specific parts or create content in an element that doesnβt actually exist in the HTML!
β This adds a star before the heading text!Β
β This adds a star after the heading text!Β
Try using ::before or ::after to add content before or after any element on your page!
Pseudo-Classes change styles based on states or positions (like :hover, :first-child).
Pseudo-Elements allow us to style specific parts or add content to an element (like ::before, ::after).
π¨βπ» Experiment Time:
Create a button and change its style when hovered.
Add a star icon before or after some text using ::before or ::after.
For a better understanding, watch the video below:πΒ
CSS rules are not always applied in the order they appear, because specificity and the cascade decide which rule wins. Let's break it down!
Specificity helps determine which rule wins when there are conflicting styles. More specific selectors override less specific ones.
Inline styles (e.g., style="color: red;") are the most specific.
ID selectors (e.g., #header) are more specific than class or tag selectors.
Class selectors, attribute selectors, and pseudo-classes (e.g., .button, [type="text"], :hover) are less specific.
Tag selectors (e.g., p, h1) are the least specific.
β Result: The h1 will be red because the second rule is applied last in the cascade.Β
The cascade determines which rules apply when there is a tie in specificity. The order of rules in your stylesheet matters!
Inline styles (highest specificity).
External stylesheets or <style> blocks (depending on the order in the document).
Important rules.
For a better understanding, watch the video below:π
Create two conflicting styles: one using an ID selector and the other a tag selector. Try changing the order to see which one wins.Β
π Great Job!Β