nth-child and nth-of-type sound like the same thing, and in some situations, they can act the same way as well. Learn which pseudoclass is right for which situation, and never confuse the two again!
For more than 15 years, Jen Kramer has been educating clients, colleagues, friends and graduate students about the meaning of a "quality website." Since 2000, she has built websites that are supportive of business and marketing goals in a freelance capacity and as part of an agency.
Jen is an O'Reilly Media staff author. Her first training title is "Getting Started with Sass." Watch for many more titles to follow! Previously, Jen was a lynda.com author.
Jen has written two books published by Wrox Press (a division of Wiley), Joomla! Start to Finish: How to Plan, Execute, and Maintain Your Web Site and Joomla! 24-Hour Trainer.
Jen currently offers in-person and online courses through Harvard Extension School and National University. She is also available for individual private tutoring, customized classroom training, and consulting.
Jen earned a BS in biology at University of North Carolina at Chapel Hill and an MS in Internet Strategy Management at the Marlboro College Graduate School.
Part of the new CSS3 standard, the nth-of-type and nth-last-of-type pseudoclasses are a useful way to select elements on a website, such as odd or even elements, or every 3rd or 4th element. Learn how this simple selector can impact your next project.
Part of the new CSS3 standard, the nth-child and nth-last-child pseudoclasses are a useful way to select elements on a website, such as odd or even elements, or every 3rd or 4th element. Learn how this simple selector can impact your next project.
Use attribute selectors to label links consistently with this handy formula.
Part of the CSS2 standard, and expanded in CSS3, an attribute selector selects attributes, rather than tags, in your HTML. Variations include simple, exact, partial, and beginning and ending substrings.
In CSS, rem and em are two commonly encountered units of measurement. What does each unit mean? What is the difference between the two?
In my final day of examining new features in Bootstrap 4, we’ll look at a feature that isn’t glamorous, but it sure is handy. There are a zillion new and revised utility classes in Bootstrap 4, making styling more flexible and easier than ever.
In Day 3 of my examination of Bootstrap 4's new features and functions, we'll look at the Sass files. That's right–Bootstrap 4 has dumped LESS in favor of Sass CSS preprocessor files. The files have been completely rewritten and refactored to take advantage of Sass data structures. It's easy to make changes to a few variables and have a much different looking page.
In Day 2 of my examination of Bootstrap 4's new features and functions, we'll look at cards. Bootstrap defines these as "a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options." Cards are so powerful, they have replaced three features from Bootstrap 3, including panels, thumbnails, and wells.
Bootstrap's responsive grid system grows from 4 breakpoints to 5 in the newest version, providing extra flexibility for mobile devices.