Join James Williamson for an in-depth discussion in this video Targeting inline content, part of CSS: Selectors.
- The first-line and first-letter…pseudo-element selectors allow us to target…the first line or first letter…of any inline-block content.…Though there are some restrictions…on the properties that you can use…to style these elements,…they make the process of adding…special styling to text a lot easier.…So to illustrate that…we're gonna be working with the inline.htm file.…I wanna point out a couple of things…about these selectors.…Now first off,…although this seems obvious,…first-line and first-letter are going to target…inline text content.…So they're gonna target things like paragraphs,…or table cells that have…inline text content inside of them.…
The other thing is that the target element…has to have a display value of either block,…inline-block, table-cell,…or table-caption to return a match.…Otherwise it won't match.…And both of them are sort of limited…in terms of the actual styling that you can apply.…First-line, for example,…is limited to things like font properties,…related text properties like text transform,…
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Basic Selectors
2. Attribute Selectors
3. User Action Pseudo-Class Selectors
4. Structural Selectors
6. Matching Patterns
7. Writing Efficient Selectors
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.