Download presentation
Presentation is loading. Please wait.
1
Focusing Your CSS Selectors
Beyond Styling Individual Elements/Tags
2
What if multiple elements (tags) have the same style?
Combine their style rules!
3
Style Multiple Elements with the Same Rule
Apply same styles to several elements Just separate them with comma’s
4
What if some, but not all, properties are the same between elements?
5
Example h1 and p both blue only p right-aligned
p will pick up a collected set of its rules from both locations Style shared properties together first Then style differences separately later
6
Is there a way to make elements have a particular style only if they are surrounded by other elements? Descendent Selectors
7
Selecting only tags that are children of another tag
A descendent selector can be used to select tags only if they are children of another tag Select only b tags that are children of h1 tags Only the <h1> <b> content is red Left-most selector is parent
8
Can I make the style of an element change when I move my mouse over it?
:hover
9
Selecting tags based on actions and conditions
A pseudo-selector is a modifier added to select a tag only under certain conditions When mouse hovers over em element
10
Adding the class attribute.
What if I only want some of the copies of the same element to have different styles? Adding the class attribute.
11
Applying Style ONLY to certain tags
Create a class Precede name with a . Can apply only to certain tags Class names should be all or mostly lowercase and contain no spaces
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.