nelsonaj · March 20, 2018 06:32
diff --git a/selectorSolution.css b/selectorSolution.css
 /* Style the HTML elements according to the following instructions. 
 DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!

 /* Give the <body> element a background of #bdc3c7*/
 body {
 	background: #bdc3c7;
 }

 /* Make the <h1> element #9b59b6*/
 h1 {
 	color: #9b59b6;
 }

 /* Make all <h2> elements orange */
 h2 {
 	color: orange;
 }

 /* Make all <li> elements blue(pick your own hexadecimal blue)*/ 
 /*Descendant Selector*/
 ul li {
 	color: blue;
 }

 /*Change the background on every paragraph to be yellow*/
 p {
 	background: yellow;
 }

 /*Make all inputs have a 3px red border*/
 /*ATTRIBUTE SELECTOR*/

 input[type="text"], input[type="password"] {
 	border: 3px solid red;
 }

 /* Give everything with the class 'hello' a white background*/
 .hello {
 	background: white;
 }

 /* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
 #special {
 	border: 2px solid rgb(66, 84, 247);
 }

 /*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
 div p {
 	font-size: 25px;
 }

 /*Make only inputs with type 'text' have a gray background*/
 input[type="text"] {
 	background: grey;
 }

 /* Give both <p>'s inside the 3rd <div> a pink background*/

 div:nth-of-type(3) > p:nth-child(n+2){
 	background: pink;
 }

 /* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
 div:nth-of-type(3) > p:nth-child(3) {
 	border: 5px solid white;
 }

 /* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

 p > em{
 	color: white;
 	font-size: 20px;
 }


 /*BONUS CHALLENGES*/
 /*You may need to research some other selectors and properties*/

 /*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/
 input[type="checkbox"]:checked {
 	margin-left: 50px;
 }


 /* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/

 label {
 	text-transform: uppercase;
 }
 /*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/

 #special::first-letter {
 	color: green;
 	font-size: 100px;
 }
 /*Make the <h1> element's color change to blue when hovered over */
 h1:hover {
 	color: blue;
 }

 /*Make the <a> element's that have been visited gray */

 a:visited {
 	color: grey;
 }
	/* Style the HTML elements according to the following instructions.
	DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS!

	/* Give the <body> element a background of #bdc3c7*/
	body {
	background: #bdc3c7;
	}

	/* Make the <h1> element #9b59b6*/
	h1 {
	color: #9b59b6;
	}

	/* Make all <h2> elements orange */
	h2 {
	color: orange;
	}

	/* Make all <li> elements blue(pick your own hexadecimal blue)*/
	/Descendant Selector/
	ul li {
	color: blue;
	}

	/Change the background on every paragraph to be yellow/
	p {
	background: yellow;
	}

	/Make all inputs have a 3px red border/
	/ATTRIBUTE SELECTOR/

	input[type="text"], input[type="password"] {
	border: 3px solid red;
	}

	/* Give everything with the class 'hello' a white background*/
	.hello {
	background: white;
	}

	/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
	#special {
	border: 2px solid rgb(66, 84, 247);
	}

	/Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)/
	div p {
	font-size: 25px;
	}

	/Make only inputs with type 'text' have a gray background/
	input[type="text"] {
	background: grey;
	}

	/* Give both <p>'s inside the 3rd <div> a pink background*/

	div:nth-of-type(3) > p:nth-child(n+2){
	background: pink;
	}

	/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
	div:nth-of-type(3) > p:nth-child(3) {
	border: 5px solid white;
	}

	/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

	p > em{
	color: white;
	font-size: 20px;
	}


	/BONUS CHALLENGES/
	/You may need to research some other selectors and properties/

	/Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)/
	input[type="checkbox"]:checked {
	margin-left: 50px;
	}


	/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/

	label {
	text-transform: uppercase;
	}
	/Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)/

	#special::first-letter {
	color: green;
	font-size: 100px;
	}
	/Make the <h1> element's color change to blue when hovered over /
	h1:hover {
	color: blue;
	}

	/Make the <a> element's that have been visited gray /

	a:visited {
	color: grey;
	}