Current course:

CSS Selectors

CSS Selectors are patterns used to determine which style rules apply to elements.

Universal selector (*) is used to select "any element":
* { margin:0px; } /* This would make EVERY element on the page have a margin of 0px */

Type selectors are used to specify an element type:
p { margin-bottom:10px; } /* This would make all paragraphs have a 10 pixel bottom margin */
img { border: 3px; } /* This would make ALL images have a 3px border */

ID selectors target an element with a specific id:
#myPhoto { border: 20px solid pink; } /* This would make the element with id="myPhoto" have 20px pink border */
div#myPhoto { padding: 5px; } /* This would make the <div> element with id="myPhoto" have a 5px padding */
REMINDER: you can NOT have more than one element on a page with the same ID

Class selectors target an element with a specific class:
.photo { border: 3px; } /* This would make any element with class="photo" have a 3px border */
img.photo { margin: 10px; } /* This would make any image with class="photo" have a 10px margin */

Descendant selectors select an element(s) that is a descendant of another element:
p img { border: 3px; } /* This would make all images that are within a paragraph tag have a 3px border */
a img { border: 0px; } /* This would make all images that are within an anchor tag have no border */
p a img { border: 2px; } /* This would make all images that are within an anchor tag that's within a paragraph tag have a 2 px border

Child selectors target an element that is a child of another element.

<head> is an example of a child of <html>
<body> is also a child of <html>.
<head> and <body> are siblings.
<html> is the parent of both <head> and <body>
A <p> tag within <body>, it is NOT a child of <html>, but an ancestor - it is a child of <body>

To select a child element, use the > sign:
p > img { border:1px; } /* This would make any image that is directly within a <p> tag have a 1 pixel border */

Other selectors
There are other selectors as well, like attribute selectors, adjacent selectors, and more - the ones above are the most common, but feel free to look into other selector options.