CSS Selectors
Tags: webdev, beginners
Published: 2021-05-07 00:19:47

## 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 inside`X`, 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:
```css
*: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:
- [The 30 CSS Selectors You Must Memorize](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)