Element Selector

Element selectors are used to style a single element. This single element can be a p, a h1, or a table.

		p {
			color:green;
			padding:3px;
		}
		
		h1 {
			color:red;
			font-size:2.12em;
		}
		

The p selector styles all <p> elements on the page.

Group Selector

Group selectors are used to style multiple elements, with multiple kinds of selectors, at the same time. Group selectors use a comma-separated list of selectors.

		tbody tr td, thead tr td {
			color:black;
			font-weight:bold;
			border:1px solid black;
		}
		
		h1, h2, h3 {
			color:red;
			font-size:2.12em;
			text-decoration:underline;
		}
		

The first block targets elements nested in the pattern tbody → tr → td, as well as thead → tr → td. The second block targets h1, h2 and h3 headings. All the properties in the block are applied to all selectors in the comma-separated group.

Descendent Selector

Descendent selectors target specific elements, only if they are nested inside other elements. The tbody tr td used in the above code block, is a descendent selector. It targets the td element, but only if that is a child of a tr, and only if that's a child of a tbody. These table tags are always nested in this predictable template, so these selectors are necessary for styling tables.

Class selector

In CSS, you use the period (.) to style a specified class of elements. The class is specified with the HTML class attribute. The period will select all elements associated with the specified class.

		div.code {
			display:block;
			border:1px solid green;
		}
		
		.code {
			color:#88ed1a;
			background-color:#003312;
		}
		

The first selector in the above code block is a dependent class selector, because the specified class ".code" must be of the div element. The second selector in the code block, is an independent class selector, because it selects all elements with the class ".code", regardless of the HTML tag used. The first selector would work with an element: <div class="code">. The second selector would also apply to this element. However, given an element like this:

<p class="code">

This HTML element is styled by the second block of CSS rules, but not the first, because it is not a div tag. It is still apart of the code class, so it is styled by the independent selector.

ID selector

CSS works primarily with the class attributes of a page, but also with the id attributes. In CSS, you use the hash (#) to style a specified ID of elements. The ID is given with the HTML id attribute. The hash symbol will select all elements that have been given the speicifed ID.

		#contact_page {
			font-size:0.98em;
			color:black;
			background-color:white;
			padding:20px;
		}
		
		#products_page {
			font-size:1em;
			color:darkblue;
			background-color:skyblue;
			padding:5px;
		}
		

The first selector in the above code block selects any and all elements with the ID of contact_page. This HTML tag targeted by this selector would look like this: <div id="contact_page">. However, the id "contact_page" can be used on any HTML tag, and the above CSS will apply to it.

Universal selector

The * asterisk is the universal selector.

Pseudo selectors

The psuedo selectors include the following:

• :hover - Used when the element is being hovered over
• :active - Used to style an active link
• :first-child - Used to get the first child of any element
• :visited - Used to style a visited link