# CSS Worksheet
To preview a markdown file in VS Code:

Ctrl + SHIFT + V


## 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 {} targets a <li> element that itsself has the class selected. Located inside a <ul>.

ul li . selected{} targets any element with the class selected that is a decendent of an <li> element within a <ul> (because of the space before the dot).


## 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
The square brackets are used to attribute selectors. They target elements based on the presence or value of a specific HTML attribute.
input[type=text] targets all input elements that have an attribute name type with 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 > symbol is the child combinator. It targets elements that are direct children of the first elements.
div >p targers all of the <p> elements that are immidiate children of a div. it wont target a <p> that is nested deeper inside anotjer element within that div.

## 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 tidle (~) is the general sibling combinator. It targers elements that share the same parent and come after the first element.
h3~ p targets all sibling <p> elements under the same parent.


## 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 the adjacent sibling combinor. Tagerts an element that's the next sibling of another element. 
input[type=radio] + label{} targets the <label> element that appears right after a radio button input. 

## Problem 6
Explain what a **psuedo selector** is in CSS.
And include a code sample that demonstrates a psuedo selector.
### Put your answer here
A psuedo selector is used to define a specific part of an element or a special state of an element.

a:hover {
	color: red;
	text-dectoration: underline;
}