DEV Community

loading...

CSS Selectors

rafaelvieirab
A computer science student
・6 min read

Basic Selectors

1. *

Example:

```css
* {
 margin: 0;
 padding: 0;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

Prefixing the hash symbol to a selector allows us to target by id.

3. .X

Example:

```css
.error {
  color: red;
}
```
Enter fullscreen mode Exit fullscreen mode

This is a class selector.

4. X

Example:

```css
a { color: red; }
ul { margin-left: 0; }
```
Enter fullscreen mode Exit fullscreen mode

This is a element selector.

Combinator Selectors

5. X Y

Example:

```css
li a { text-decoration: none; }
```
Enter fullscreen mode Exit fullscreen mode

Select the Y element that is insideX, but not necessarily the immediate children.

6. X + Y

Example:

```css
ul + p {
   color: red;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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 */
}
```
Enter fullscreen mode Exit fullscreen mode

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 */
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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; }
```
Enter fullscreen mode Exit fullscreen mode

17. X:checked

Example:

```css
input[type=radio]:checked {
    border: 1px solid black;
}
```
Enter fullscreen mode Exit fullscreen mode

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%;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

20. X:not(selector)

Example:

```css
div:not(#container) {
   color: blue;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

21. X::pseudoElement

Example:

```css
p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;
}
```
Enter fullscreen mode Exit fullscreen mode

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;   
}
```
Enter fullscreen mode Exit fullscreen mode

The first-of-type pseudo class allows you to select the first siblings of its type.

References:

Discussion (2)

Collapse
afif profile image
Temani Afif

are you the owner of the original article: code.tutsplus.com/tutorials/the-30... ?

Collapse
rafaelvieirab profile image
Forem Open with the Forem app