CSS Selectors

CSS class

An identifier that allows multiple elements in an HTML document to be styled in the same way and the name begins with the period symbol (.)

CSS Id

Identified by the symbol # and a given name, are unique to one element on the web page.

p + h2 { margin-top: 10px; }

If you want to add a top margin to all the h2 tags that follow a paragraph (you don't need to add a top margin if the heading comes after an h1 tag or if it's the first element on that page):

Child Selector

Is represented by the sign ">". It allows you to target elements that are direct children of a particular element. For example: p > span{ }

Attribute Selectors

Let you target an element based on an attribute name.

HTML

Represented by an HTML element name.

div, p { }

Selects all <div> elements and all <p> elements

p.intro { }

Selects all <p> elements having the class = intro.

div p { }

Selects all <p> elements inside <div> elements.

div > p

Selects all child <p> elements where the parent is a <div> element

.name1, .name2

Selects all elements having either or both class names and all elements

element.class

Selects all elements having the name listed as well as a named class - Ex p.intro { }

[lang|=en]

Selects all elements with a lang attribute value starting with "en"

[target]

Selects all elements with a target attribute

[title~=flower]

Selects all elements with a title attribute containing the word "flower"

.name1 .name2

Selects all elements with name2 that is a descendant of an element with name1

[target=_blank]

Selects all elements with target="_blank"

.name1.name2

Selects and styles all elements with both name1 and name2 set within its class attribute

p ~ ul { }

Selects every <ul> element that are preceded by a <p> element

.post h1 ~ p { font-size: 13px; }

So if you need to target all the p tags that are within a particular element having the class "post" and that follow the h1 tag, you can use this selector.

General Sibling Combinators

These works pretty much the same as the adjacent sibling combinator, but with the difference that the second selector doesn't have to immediately follow the first one.

Adjacent sibling combinator

This selector uses the plus sign, "+", to combine two sequences of simple selectors. The elements in the selector have the same parent, and the second element must come immediately after the first.

div.post p + h2 { margin-top: 10px; }

You can be even more specific and say that you only want this rule applied if the elements are within a particular div: Rule - If you want to add a top margin to all the h2 tags that follow a paragraph (you don't need to add a top margin if the heading comes after an h1 tag or if it's the first element on that page):

Universal Selector

identified by the symbol * and styles all elements and may be overridden by other types of selectors.