Top 4 Things in CSS3 to Know About
After using libraries like Bootstrap and Semantic on a few recent projects, I decided to do a refresher on the ins and outs of good ol’ CSS. During my research, I was struck by some features that were only added in CSS3, and I decided to focus specifically on those and summarize them in this blog post.
Attribute Selectors
There are a few selectors new to CSS3 that make it easier to select an attribute with more specificity. The [attr^=val] selector will look for a DOM element with a value that starts with the string passed in. One of the most common use cases for this is links. For example, if I wanted to style any links to external URLs (as opposed to other areas of the document) to be red instead of the default color, I would do the following:
a[href^="https://"] {
color: blue
}This selector looks for any any attribute <a> elements with and href attribute that begins with the string https:// and applies the blue color styling to them. This prevents the need to give certain elements classes or ids when they can be selected based on their attributes instead. Other variations of this include [attr$=val], which looks at the end of the attribute (and could be useful for selecting based on file extension names), and [attr*=val] must match the entire attribute name.
Pseudo-Classes
You’re probably familiar with pseudo-classes from using a:visited to style links that have been visited or a:hover for links that users have their mouse over. CSS3 introduced several new pseudo-classes, many of which involve selecting elements based on their sequencing.
The :nth-child selector lets you select only certain children based on their order. It accepts a multiple of n, or even or odd. For example, if I wanted to alternate the background colors of items in a list, I could do the following:
li:nth-child(even) {
background-color: gray
}You can also select based on the sequencing of type. If I wanted to add styling to the last paragraph of a blog, I could use p:last-of-type to select it.
Shadows
CSS3 made it much easier to add shadows to the back of elements. The box-shadow property accomplishes that, and it accepts several arguments. You can alter the how far offset it is, the deepness of the shade according to theblur-radius, the size of the shadow according to the spread-radius and the color of the shadow. You can also do the same to any text with the text-shadow property.
Rounding Corners
With CSS3, it’s easy to add rounder corners to an element with the border-radius property. To add rounder corners of a certain size, I would give it the property of border-radius: 20px. You can also alter only one corner by using the property of border-top-left-radius, for example.
I hope you have found this to be a helpful summary of noteworthy features in CSS3, and I encourage you to check out the resources below for further reading.
