CSS: The class selector The class selector is a way to select all of the elements with the specified class name, and apply styles to each of the matching elements. Declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class. The browser will look for all tags in the page that have a class attribute containing that class name.

.class-name { property:value; }

If you want to use the same class name for multiple elements, but each with a different style, you can prefix the dot with the HTML element name.

For example:

p.large { font-size: 2em;}

The class name can't contain a space, but it can contain hyphens or underscores. Any tag can have multiple space-separated class names.

CSS ID Selectors

The id selector is a way to select only the element with the specified id, and apply styles to that element. The selector must start with a pound sign (#) and then the value of the id attribute. The browser will then look for a tag in the page that has an id attribute equal to that id.

The spelling and the casing must be exactly the same - #soon_gone is different from #Soon_Gone. The page should not have multiple tags with the same id every id should be unique.

#id-name { property:value; }

Again, similar to classes, if you want to use the same id name for multiple elements, but each with a different style, you can prefix the hash with the HTML element name.

p#intro { font-size: 2em; }

Note: ID applies to EVERY single thing with that specified element, while class applies only to the classes you gave to everything, so ID would make every h2 purple in ID for example, but class would only make the one h2 you gave the class to purple.

CSS: The element selector

The element selector is a way to select all the elements with a given tag name in

a document, and apply the same styles to each element with the tag name.

Note that you should only write the tag name, and not write brackets around the

tag name — h1, not <h1>.

CSS: The descendant selector

The descendant selector is a way to select elements that are located somewhere underneath other elements, according to the tree structure of the webpage. This selector is actually multiple selectors combined together, but separated by a space.

The first selector is the "ancestor", the element(s) that must be located higher in the tree, and the second selector is the "descendant", the element(s) that must be located somewhere underneath the ancestor in the tree. To understand ancestor/descendant relationships, you need to think about the webpage is a tree.

Pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

For example, :hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */

Button:hover{

color:blue;

}

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

A few common pseudo-classes are

• :link

• :visited

• :hover

• :active

• :first-child

• :nth-child

Syntax:

selector: pseudo-class{

property:value;

}

Single Or Double Colon For Pseudo-Elements?

The double colon (::) was introduced in CSS3 to differentiate pseudo-elements such as ::before and ::after from pseudo-classes such as :hover and :active. All browsers support double colons for pseudo-elements except Internet Explorer (IE) 8 and below.

Some pseudo-elements, such as ::backdrop, accept only a double colon.

Dynamic pseudo-classes

These are the link-related pseudo-class states. Each of these states can be applied to an element, usually <a>. They include,

:link - This only selects <a>tags with href attributes. It will not work if it is

missing.

:active - Selects the link while it is being activated (being clicked on or

otherwise activated). For example, for the ―pressed‖ state of a button-style link.

:visited - Selects links that have already been visited by the current browser.

:hover - This is the most commonly used state. When the mouse cursor rolls

over a link, that link is in its hover state and this will select it.

Referring to index.html, it can like to change the background of <li> when hovered, give specific colors to all links, active and visited links.

Structural pseudo-classes

These exciting positioning states/selectors were introduced in CSS2. They target elements according to their position in the document tree and relation to other elements. They include

• root - This selects the element that is at the root of the document specifically the <html> element unless you are specifically working in some other environment that somehow also allows CSS.

• :first-child - Selects the first element within a parent.

• :last-child - Selects the last element within a parent.

• :nth-child() - Selects elements based on a provided algebraic expression (e.g. “2n” or “4n-1”). For example, you could use “2n” for selecting even positions and “2n-1” for odd positions. Has the ability to do other things like select “every fourth element”, “the first six elements”, and things like that.

• :first-of-type - Selects the first element of this type within any parent. If for example, you have two divs, each with a paragraph, link, paragraph, link. Then div a:first-of-type would select the first link inside the first div and the first link inside the second div.

• :last-of-type - This works the same as above but it then selects the last element instead of the first element.

• :nth-of-type() - Works like :nth-child, but it is used in places where the elements at the same level are of different types. For example, if inside a div you had a number of paragraphs and links. You wanted to select all the odd paragraphs. :nth-child wouldn‘t work in this scenario, therefore, you use div p:nth-oftype(odd).

• :only-of-type - Selects the element if and only if it is one of its kind within the current parent.

Pseudo-Elements

Content-related pseudo-elements effectively create new elements that are not specified in the mark-up of the document and can be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal mark-up, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where it belongs.

Difference between Pseudo-classes and Pseudo-elements

A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example: hover. A pseudo-element, however, allows us to create items that do not normally exist in the document tree, for example ::after. So you could simply identify a pseudo-class by a single colon (:) and a pseudo-element by two colons (::).

Pseudo-elements include:

• ::before - This enables us to add content before a certain element. For example, adding an opening quote before a blockquote.

• ::after - This enables us to add content after a certain element. For example, a closing quotes to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML mark-up.

• ::first-letter - This is used to add a style to the first letter of the specified selector. For example, to create a drop cap.