CSS Selectors

★ CSS selectors are used to find/select HTML elements based on their element name, id, class, attribute, and more.

CSS element name selector

				p{
  				text-align: center;
  				color: red;
				}

★ The id selector uses the id attribute of an HTML element to select a specific element.
★ The id of an element should be unique within a page, so the id selector is used to select one unique element.
★ To select an element with a specific id, write a hash(#) character, followed by the id of the element.
★ Note that: an id name can not start with a number!

The CSS rule below will be applied to the HTML element with id="para1":

	#para1 {
  		text-align: center;
  		color: red;
	}

		<p id="para1">Hello World!</p>
		<p>This paragraph is not affected by the style.</p>

★ The class selector selects elements with a specific class attribute.
★ To select elements with a specific class, write a period(.) character, followed by the name of the class.
★ Note that: a class name can not start with a number!

In the example below, all HTML elements with class="center" will be red and center-aligned: :

		.center {
  			text-align: center;
  			color: red;
			}

		<h1 class="center">Red and center-aligned heading</h1>
		<p class="center">Red and center-aligned paragraph.</p>

★ The grouping selector selects all the HTML elements with the same style definitions.
★ Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

In this example we have grouped the selectors from the code above:

h1, h2, p {
  text-align: center;
  color: red;
}

	<div>
        <div>
            <p>This is a paragraph in nested divisions.</p>
        </div>
    	</div>

				div div p {
					color:red;
				}

★ If you think of the <html> tag as the trunk of the tree, you can think of its immediate branches <head> and <body> as its children.
★ Both tags are children of <html>, and <html> is their parent element. Because they are both immediate children of <html> (that is, they are both only one element away), they are siblings.

★ It’s used to apply styling to only the elements that are the first children of their parents.

				p:first-child{
					color: red;
				}

★ The p:first-child selector will apply the styling (color: red;) only to a <p> element if it is the first child of its parent.
★ https://www.w3schools.com/cssref/sel_firstchild.php

✅ Works (First Child)

		<div>
    			 <p>This paragraph will be red.</p>
   			 <p>This paragraph will NOT be red.</p>
		</div>

Explanation: The first <p> inside the <div> is the first child, so it turns red.

❌Won't Work (Not First Child)

			<div>
    				<h2>Heading</h2>
    				<p>This paragraph will NOT be red.</p>
    				<p>Neither will this one.</p>
			</div>

Explanation: The <h2> is the first child of <div>, so the first <p> is not affected by p:first-child.

★ You can actually select any child of an element after the first child with the selector nth-child; you just add the child’s number in parentheses after the pseudo-class selector.
★ For example, the following would turn every paragraph that is the second child of its parent element red.

				p:nth-child(2){
					color: red;
				}

✅ Works (Second Child)

		<div>
			 <p>First paragraph (not red).</p>
    			 <p>Second paragraph (red).</p>
   			 <p>Third paragraph (not red).</p>
		</div>

Explanation: The second <p> is the second child of <div>, so it turns red.

❌Won't Work (Not Second Child)

		<div>
			 <p>First paragraph (not red).</p>
    			 <h1>Heading (not red).</h1>
   			 <p>Third paragraph (not red).</p>
		</div>

Explanation: The <h1> is the second child of <div>, so the first <p> and third <p> will not be affected by p:nth-child(2).