Combining Selectors

Helpful Hint: To commit something out in CSS type:

/* Things you don’t want the program to run */

OR

in VS Code and Pycharm programs you can highlight what you want committed out and press the “Ctrl” then the “/” forward slash sign together. It works in HTML, CSS, etc.

If you have multiple selectors that you want the same property and value for, all you have to do is group them together separated by a comma.

A list selector looks like:
	h1, h2, h3, p, li {
		font-family: sans-serif;
	}

A descendant selector below changes all of the paragraphs inside a footer, for example:
	footer p {
		font-size: 10px;
	}

In a nested descendant selector you can have a child inside a parent inside a parent. So, in this example you only want to style the paragraphs that are inside a header, that is inside an article.
	article header p {
		font-style: italic;
	}

In a nested descendant selector you can have a child inside a parent inside a parent. (This basically encodes the HTML structure into our CSS selector. And that is not a good idea.) But, in the following example it demonstrates how you can style the paragraph(s) that are inside a header, that is inside an article.

	article header p {
		font-style: italic;
	}

ID selector names specific lines of HTML code with a specific name. Then you call on it in CSS with the “#” sign and the name you gave it. You can only use an ID selector only one time.

Like so:

	<p id=”author”>Posted by Helen Brown</p>	(in HTML)
	
	#author {					(in CSS)
		font-style: italic;
	}

Use a class selector if you need to reuse a name multiple times. It is also helpful to use class selectors over id selectors, because if you need or want to add onto your code in the future or potential changes, you can just add a new class selector. If you have to change an id selector, you will have to change it both in the HTML and the CSS into a class selector, before it will work. Then you call on it in CSS with the “.” sign and the name you gave it. For example:

	<p class=”related-author”>By Ann</p>		(in HTML)
	<p class=”related-author”>By Jonas</p>

	.related-author {				(in CSS)
		font-size: 18px;
		font-weight: bold;

Note: It is a convention in CSS that if you have multiple names or words in a Class or an ID selector you separate them with a dash or an underscore. But preferably a dash.