rafaelvieirab
Posted on May 7, 2021
Basic Selectors
1. *
Example:
```css
* {
margin: 0;
padding: 0;
}
```
The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding.
2. #X
Example:
```css
#container {
width: 960px;
margin: auto;
}
```
Prefixing the hash symbol to a selector allows us to target by id.
3. .X
Example:
```css
.error {
color: red;
}
```
This is a class selector.
4. X
Example:
```css
a { color: red; }
ul { margin-left: 0; }
```
This is a element selector.
Combinator Selectors
5. X Y
Example:
```css
li a { text-decoration: none; }
```
Select the Y element that is insideX, but not necessarily the immediate children.
6. X + Y
Example:
```css
ul + p {
color: red;
}
```
This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.
7. X > Y
Example:
```css
div#container > ul {
border: 1px solid black;
}
```
The difference between the standard X Y and X > Y is that the latter will only select direct childrenIn the example above, all elements ul children of div#container will be selected.
8. X ~ Y
Example:
```css
ul ~ p {
color: red;
}
```
This sibling combinator is similar to X + Y, but it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.
Attribute Selectors
9. X[title]
Example:
```css
.error {
color: red;
}
```
Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling.
10. X[href="foo"]
Example:
```css
a[href="https://code.tutsplus.com"] {
color: #83b348; /* Envato green */
}
```
The snippet above will style all anchor tags which link to https://code.tutsplus.com; they'll receive our branded green color. All other anchor tags will remain unaffected.
11. X[href*="foo"]
Example:
```css
a[href*="tutsplus"] {
color: #83b348; /* Envato green */
}
```
There we go; that's what we need. The star designates that the proceeding value must appear somewhere in the attribute's value. That way, this covers tutsplus.com, code.tutsplus.com, and even webdesign.tutsplus.com.
12. X[href^="http"]
Example:
```css
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
```
Ever wonder how some websites are able to display a little icon next to the links which are external? I'm sure you've seen these before; they're nice reminders that the link will direct you to an entirely different website.
13. X[href$="http"]
Example:
```css
a[href^=".jpg"] {
color: red
}
```
Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an imageโor at least a URL that ends with .jpg. Keep in mind that this won't capture GIF and PNG images.
14. X[data-*="foo"]]
Example:
```css
a[data-filetype="image"] {
color: red;
}
```
Selects all a's with data-filetype equal to "image".
X[foo~="bar"]
Example:
```css
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
```
Here's a special one that'll impress your friends. Not too many people know about this trick. The tilde (~) symbol allows us to target an attribute which has a space-separated list of values.
Pseudo Selectors
16. X:visited and X:link
Example:
```css
a:link { color: red; }
a:visited { color: purple; }
```
17. X:checked
Example:
```css
input[type=radio]:checked {
border: 1px solid black;
}
```
18. X:after
Example:
```css
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
```
This hack uses the :after pseudo class to append a space after the element, and then clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible.
This hack uses the :after pseudo class to append a space after the element, and then clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible
19. X:hover
Example:
```css
adiv:hover {
background: #e3e3e3;
}
```
20. X:not(selector)
Example:
```css
div:not(#container) {
color: blue;
}
```
The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly.
Or, if I wanted to select every single element (not advised) except for paragraph tags, we could do:
*:not(p) {
color: green;
}
21. X::pseudoElement
Example:
```css
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
```
We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line or the first letter. Keep in mind that these must be applied to block-level elements in order to take effect.
Nth Child and Type Selectors
22. X:nth-child(n)
Example:
```css
li:nth-child(3) {
color: red;
}
```
Please note that nth-child accepts an integer as a parameter, but this is not zero-based. If you wish to target the second list item, use li:nth-child(2).
We can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.
23. X:nth-last-child(n)
Example:
```css
li:nth-last-child(2) {
color: red;
}
```
What if you had a huge list of items in a ul, and you only needed to access, say, the third to last item? Rather than doing li:nth-child(397), you could instead use the nth-last-child pseudo class.
24. X:nth-of-type(n)
Example:
```css
ul:nth-of-type(3) {
border: 1px solid black;
}
```
There will be times when, rather than selecting a child, you instead need to select according to the type of element.
Imagine markup that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.
25. X:nth-last-of-type(n)
Example:
```css
ul:nth-last-of-type(3) {
border: 1px solid black;
}
```
And yes, to remain consistent, we can also use nth-last-of-type to begin at the end of the selectors list and work our way back to target the desired element.
26. X:first-child
Example:
```css
ul:nth-of-type(3) {
border: 1px solid black;
}
```
This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this to remove borders from the first and last list items.
For example, let's say you have a list of rows, and each one has a border-top and a border-bottom. Well, with that arrangement, the first and last item in that set will look a bit odd.
Many designers apply classes of first and last to compensate for this. Instead, you can use these pseudo classes.
27. X:last-child
Example:
```css
ul > li:last-child {
color: green;
}
```
The opposite of first-child, last-child will target the last item of the element's parent.
28. X:only-child
Example:
```css
div p:only-child {
color: red;
}
```
Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it.
It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored red.
29. X:only-of-type
Example:
```css
li:only-of-type {
font-weight: bold;
}
```
This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container. As an example, let's target all uls which have only a single list item.
First, ask yourself how you would accomplish this task. You could do ul li, but this would target all list items. The only solution is to use only-of-type.
30. X:first-of-type
Example:
```css
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
```
The first-of-type pseudo class allows you to select the first siblings of its type.
References:
Posted on May 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024