# CSS Worksheet

## Problem 1
Explain the difference between these two selectors (make sure to mention the elements that each selector is targeting):
```css
ul li.selected{
	/*rules (property settings) go here*/
}


ul li .selected{
	/*rules (property settings) go here*/
}
```
### Put your answer here
ul li.selected{} will select all li elements decended from a ul with the selected class
ul li .selected{} will select all elements within a li (child to a ul) with the selected class


## Problem 2
What are **square brackets** used for in CSS selectors?
For example, what does the following selector target:
```css
input[type=text]{
	/*rules (property settings) go here*/
}
```
### Put your answer here
square brackets are attribute selectors so input[type=text] selects for inputs with the attribute of type set to the value of text.


## Problem 3
What is the **greater than** character used for in CSS selectors?
For example, what does the following selector target:
```css
div > p{
	/*rules (property settings) go here*/
}
```
### Put your answer here
the > is a direct child relationship - div > p selects p elements with a direct child relationship to a div element


## Problem 4
What is the **tilde** used for in CSS selectors?
For example, what does the following selector target?
```css
h3 ~ p{
	/*rules (property settings) go here*/
}
```
### Put your answer here
the ~ is a sibling relationship - h3 ~ p selects p tags that are a sibling to an h3


## Problem 5
What is the **+** sign used for in CSS selectors?
For example, what does the following selector target:
```css
input[type=radio] + label{
	/*rules (property settings) go here*/
}
```
### Put your answer here
the + sign is used for a next sibling relationship ie the immediate sibling

## Problem 6
Explain what a **pseudo selector** is in CSS.
And include a code sample that demonstrates a pseudo selector.
### Put your answer here
pseudo selectors(pseudo classes) are used to target different element states; checked, unchecked or hover etc, different relationships between elements - :nth-child(), and different form states - valid/invalid etc

```css
a:visited{
	/*all the fancy stuff goes here - this will select an a element when the state has changed to visited by the user*/
}
```

### Answer number 2
pseudo classes arent to be confused with pseudo elements which are used to target specific parts of an element ie targeting the first line of a given element or the first letter

```css
p::first-line{
	/* fancy styling - targets the first line of a p element */
}
```
**PS: pseudo is a very awkward word to spell...**