Untitled

##Nesting##
Nesting in html is the embedding of elements within other elements, creating a parent-child relationship.

When an element is nested directly inside of another element the inner element is the child and the outer element is the parent.

***index.html***

```
<body>
	<div></div>
</body>
```
In the example above the \<body> element is the parent and the \<div> element is the child.

When there are multiple elements nested within the same element, the outer element is still the parent and the inner elements are all the children of the parent. Also, the children have a sibling relationship with each other.

```
<body>
	<p>Brother</p>
	<p>Sister</p>
	<p>Evil twin</p>
</body>
```
Above, the \<body> is the parent and the \<p> elements are siblings (also they are each the children of the body element)

You can nest elements as deeply as you want to. When an element has multiple layers of nested elements it becomes an "ancestor" and the inner elements are "descendants".

```
<body>
	<div>
		<div>
			<div>
				<p>The Abyss</p>
			</div>
		</div>
	</div>
</body>
```
In the example above, all of the \<div> elements and the \<p> element are descendants of the \<body> element. The \<body> element and \<div> elements are all ancestors of the \<p> element.

##CSS Selectors##
####In CSS, selectors are patterns used to select the element(s) you want to style.####
####Let's take a look####

In the example below we use an html \<p> element as our selector.

***main.css***

```
p {
	color: red;
}
```

Now, any paragraph element in our document will have the color red.

####Class Selectors####

You can also use class names as selectors. In html you can assign any class name you want to any element. Multiple elements in a document can have the same class value.

***index.html***

```
<body>
	<h1 class="special">Hello World</h1>
	<p class="special">Here's Johnny</p>
	<p>Live from New York</p>
</body>
```

In your stylesheet, type a full stop (period) before the class name when you use it in a selector.

***main.css***

```
.special {
	color: blue;
	text-decoration: underline;
}
```

Note that the \<h1> element and the first \<p> element are effected by our styling and the second \<p> element without the class "special" is not effected.

####ID Selectors####

ID attributes can be used as selectors as well. In html you can assign any id name you want to any element but the ID name must be unique in the document (only used on one element).

***index.html***

```
<body>
	<div id="header">
		<h1>Welcome</h1>
	</div>
	<div>
		<p>All of the content</p>
	</div>
</body>
```

In your stylesheet, type a number sign (hash) before the ID when you use it in a selector.

***main.css***

```
#header {
	width: 100%;
	height: 70px;
	background-color: blue;
}
```
##Selectors based on relationships##

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

####A E####

Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)

Using the html below the following css would effect any \<p> elements within a \<div> but not the \<p> element outside of a \<div>.

***index.html***

```
<body>
	<div>
		<p>Wheel of Fortune</p>
		<div>
			<p>Jeopardy</p>
		</div>
	</div>
	<p>The Price is Right</p>
</body>
```
***main.css***

```
div p {
	font-style: italic;
}
```
####A > E####

Any E element that is a direct child of an A element.

***index.html***

```
<body>
	<div class="header">
		<div>
			<div>
				<p>The Abyss</p>
			</div>
		</div>
	</div>
</body>
```
***main.css***

```
.header > div {
	width: 400px;
	height: 100px;
	background-color: purple;
}
```
Note that this only effects the direct child of "header" and not further descendants.

##Pseudo-classes##

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Add psuedo-classes to other element selectors

***main.css***

```
button {
	background-color: blue;
}

button:hover {
	background-color: red;
}
```

####Some common psuedo classes####

**:active** - activated when the element is clicked

**:checked** - used for input type=checkbox

**:first-child** - represents any element that is the first child element of its parent

**:first-of-type** - accesses the first of the type of element being referenced within the element's parent container

**:focus** - upon input or button focus (using tab to cycle through elements in the browser)

**:hover** - activated when a user mouses over the element

**:last-child** - represents any element that is the last child element of its parent

**:last-of-type** - accesses the last of the type of element being referenced within the element's parent container

**:visited** - used on anchor elements \<a>Link\</a>