Here is a list of 12 CSS3 selectors you need to know in 2018. These simple, yet useful CSS3 selectors will save you time when designing for the web and ultimately make your life easier.
First, we will start out with interval and multiplier selections.
#1 :first-of-type – CSS3 Selectors You Need to Know in 2018
CSS3 introduced the incredibly useful :first-of-type selector. In the case you ever wanted to select the first paragraph of a block of text, you’ll know what I mean. Of course you could also use p:first-child but where’s the fun in that?
For example:
#contents > p:first-of-type {
border-left: solid #000 3px;
padding-left: 15px;
}
#2 :only-child and :only-of-type – CSS3 Selectors You Need to Know in 2018
:only-child is one of the CSS3 selectors you need to know if you want to make single elements really stand out. For instance, if you have a container holding only one paragraph and you want it to have a larger font to show importance. This would be the pseudo selector you want to use in that case.
Both :only-child and :only-of-type will check for if the target element has only one child of a specific element, class or ID. However, :only-of-type will work when there are more than a single type of element inside a container.
To illustrate:
#contents > p:only-child {
font-size: 3em;
}
#3 :nth-child – CSS3 Selectors You Need to Know in 2018
:nth-child makes it easy to iterate through X amount of elements. If you wanted to make every other paragraph styled differently, use :nth-child(2n). There are other methods of selection using :nth-child, such as :nth-child(n+2) or :nth-child(n-2). :nth-child(n+2) would select all elements after the first.
:nth-child(n-2) would select all elements until the last. :nth-child(-n+1) or :first-child would select the first element, whereas :nth-last-child(1) or :last-child would select the last element. See more examples of the nth-child selector at CSS-Tricks.
It may take some playing around with these selectors until you finally get them down. However, these selectors are a great time saver and therefore one of the most important CSS3 selectors you need to know.
For instance:
#contents > p:nth-child(2n) {
background-color: #EEE;
}
#4 background-size – CSS3 Selectors You Need to Know in 2018
CSS3 introduced the background-size property to allow for an easier method to make images responsive to their containers. I found that in most cases, “background-size: cover” works exceptionally well in responsive design. Here is a list of other possible background-size values introduced in CSS3.
- Cover: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). Images will expand to cover the entire container.
- Contain: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). However, the image is letter-boxed within the container.
For example:
#banner {
background-image: url('http://unsplash.it/1000/350');
height: 250px;
width: 100%;
}
#5 box-shadow Property – CSS3 Selectors You Need to Know in 2018
box-shadow is a great addition to the style of elements in CSS. By simply adding the box-shadow property you can create all sorts of cool effects. Using box-shadow, you could easily add a hover effect to an element or add an inset to give the appearance of depth.
For example:
#contents {
box-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
box-shadow uses 4 arguments to define the position of the shadow and the blur amount. That first argument “0” represents the X-offset, the second argument “1px” represents the Y-offset, the third argument “10px”represents the blur amount and the last argument is the defined color for the shadow.
It’s a great effect, even Google’s taken a liking to using box-shadow in their material design.
#6 text-shadow Property – CSS3 Selectors You Need to Know in 2018
Text shadow isn’t too useful in normal web design practice. However, it is one of the CSS3 selectors you need to know just in case. A great example of a use case and the text-shadow CSS property is when you have light text on a light background. By using a dark text shadow, the text will still remain legible due to the outline.
Another cool use is of text-shadow is to create a blurred text effect or colored text outline effect.
For instance:
#contents {
text-shadow: 1px 0 1px #000;
}
As has been noted, text-shadow follows the same argument format as box-shadow. In both cases, the spread does not have to be defined. For the same reason, you could simple define the X and Y-offset and a color.
#7 RGBA Colors – CSS3 Selectors You Need to Know in 2018
In CSS3 we now have the ability to have alpha transparency in colors. Thus, using RGBA you can have text colors that blend in better with the background color of the parent element. In addition, background colors can also easily be blended into the parent’s background color using the RGBA alpha channel. What’s more, RGBA colors can also be used with border and outline colors as well.
For example:
#contents {
color: rgba(0,0,0,0.85);
}
In fact, when following Google’s material design approach, they recommend using a text color that is about 85% darker or lighter than the content’s background (depending on light or darkness). This color recommendation makes reading content easier on your eyes. Using RGBA in the text color like the above example, makes this task easier to accomplish.
#8 ::before and ::after – CSS3 Selectors You Need to Know in 2018
CSS3 added support for pseudo classes, in addition to pseudo-elements established in CSS2. However, because some browsers don’t support the ::before and ::after pseudo-class notation yet it’s best to use the pseudo-element variant. Moreover, all elements contain a reserved portion of space before and after an element’s display. :before and :after give the ability to target those areas.
For instance, say you wanted to add some text to the end of every paragraph or heading – Simply target the :after pseudo-element and use the CSS content property to write out the text.Ffor instance:
#contents > h1:after {
content: " - sitename.com";
}
In the example above, you can see how easy it is to include your website name in the content of every H1 title of your content.
On the other hand, one caveat to the CSS content property, is it does not allow any HTML.
#9 CSS Attribute Selectors – CSS3 Selectors You Need to Know in 2018
It is now possible to design based on element attributes. First, simply place an attribute in square brackets after an element tag, class or ID. Further, combine it with :before and :after to extend the selector even more.
For example:
#content a[href^='https://']:after {
content: ' (secure link)';
}
As a result, this will append a string of ” (secure link)” to all links that begin with “https://” — notifying visitors that the link is an external link leading to a secure connection site.
#10 Transform Property – CSS3 Selectors You Need to Know in 2018
CSS transforms allow movements in the X and/ or Y axis. In any case, a great use case of CSS transforms is triggered animation for an on click or hover event. Hover.css has a great showcase of all the different effects possible using the CSS transform property.
As I have noted, here are some popular functions for the CSS3 transform property:
- translateX()
- translateY()
- scale()
- skew()
Further, see the full list of available CSS transform values at MDN Web Docs.
#contents button {
transform: rotate(5deg);
}
#11 transition property – CSS3 Selectors You Need to Know in 2018
Out of all CSS3 selectors you need to know, transitions will become your best friend when creating animated elements. Summing up, CSS transition controls the speed of which your animation plays from start to finish and it’s one of the easiest selectors to remember.
CSS3 transitions require the property, followed by the value of speed in seconds.
For example:
#contents button {
transition: background 0.2s;
}
In addition to CSS3 transitions, there exists the transition-timing-function property. In brief, values for transition-timing-function include:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
In this case:
#contents button {
transition: background 0.2s, color 0.2s;
}
Another way of including a transition-timing-function with your CSS3 transition can be accomplished by placing the transition-timing-function value after the targeted property value.
Note: Add more than one property to transitions by separating them with commas.
In another case:
#contents button {
transition: background 0.2s ease, color 0.2s ease-in;
}
#12 :empty – CSS3 Selectors You Need to Know in 2018
:empty introduced an easy way to style elements that have no content in CSS. In most cases, it would be more efficient to use client side or server side logic to avoid rendering the element altogether. However, in the rare case you cannot :empty is a great fallback.
To illustrate:
#contents p:empty {
display: none;
}
#13 :not – CSS3 Selectors You Need to Know in 2018
Without a doubt, the :not selector is truly in a league of its own. First, the CSS3 :not selector finally gave us a way to target the element, class and ID exceptions. For instance, say you had a content area with elements which were mostly given a “success” class. Due to this, the base text color may have been set to green. Now, you can target other elements that were not given that class and change the text to red in response to an error.
For example:
#contents > :not(.success) {
color: red;
}
To take it further, this could be extended with the attribute selectors. For instance, if you had a bunch of class names that may have started with “col-“.
In this case:
:not[class*='col-'] {
background-color: #FFF;
}
This will give all elements that don’t contain a class starting with “col-” a white background.
