Selector of CSS

Referenced from CSS Dinner.
Hava fun with it!

---

Type Selector

Select the element by their type.

A

Selects all elements of type A.Type refer to the type of tag.So
<div>,<p>,<ul> are all different element types.

Examples

p selects all <p> elements.

---

ID Selector

Select the element with an ID.

#id

Selects the element with a specific id.You can also combine the id
selector with the type selector.

Examples

#cool selects any element with id = "cool".

---

Descendant Selector

Select an element inside another element.

A B

Selects all B inside A.B is called a descendant because it is
inside another element.

Examples

#fancy span selects any span elements that are inside the element
with id = "fancy".

---

Class Selector

Select the elements by their class.

.classname

Selects all elements with that class attribute.Elements can only hav
one id,but many classes.

Examples

.fruit selects all elements with class = "fruit".

---

Comma Combinator

Combine,selectors with …commas!

A, B

Selects all A and B elements.You can combine any selectors this
way,and you can specify more than two.

Examples

p, .fun selects all p elements as well as all elements with
class ="fun".

---

The Universal Selector

You can select everything.

*

You can select all elements with the universal selector.

Examples

p * selects any elements inside all <p> elements.

---

Adjacent Sibling Selector

Selects an element that directly follow another elements.

A + B

This selects all B elements that directly follow A.Elements
that follow one another are called siblings.They are the same lever
or depth.

Examples

p + .intro selects every element with class="intor" that
directly follow a <p>.

---

General Sibling Selector

Select elements that follows another element.

A ~ B

You can select all siblings of an element that follow it.This is
like the Adjacent Sibling Selector(A + B) except it gets all the
following element instead of one.

Examples

A ~ B selects all B elements that follow a A.

---

Child Selector

Select direct child of an element.

A > B

You can select elements thar are direct children of other elements.
A child element is any element that is nested directly in another
element.

Elements that are nested deeper than that are called descendant
elements.

Examples

A > B selects all B that are direct children A.

---

Pseudo Selector

• Firsht Child Pseudo-selector

  Select a first child element inside another element.

  :first-child

  You can select the first child element.A child element is any
  element that is directly nested in another element.You can combine
  this pseudo-selector with other selectors.

  Examples
  p:first-child selects all first child <p> elements.

• Only Child Pseudo-selector

  Select an element that are the only child element inside another
  one.

  :only-child

  You can select any element that is the only element inside another
  one.

  Examples

  span:only-child selects the <span> elements that are the only
  one child of some other element.

• Last child Pseudo-selector

  Select the last element inside another element.

  :last-child

  You can use this selector to select an element that is the last
  child inside another element.

  Tip -> In cases where there is only one element,that element counts
  as the first-child,only-child and last-child.

  Examples

  :last-child selects all last-child elements.

• Nth child Pseudo-selector

  Select an element by its order in another element.

  nth-child(A)

  Selects the nth(Ex:1st,2nd,3rd etc.)child element in another element.

  Examples

  div p:nth-child(2) selects the second p in every div.

• Nth Last Child Selector

  Select an element by its order in another element,counting
  from back.

  nth-last-child(A)

  Selects the children from the bottom of the parent.This is like
  nth-child,but counting from the back.

  Examples

  :nth-last-child(2) selects all second-to-last child elements.

• First of Type Selector

  Select first element of a specific type.

  :first-of-type

  Selects the first elements of that type within another element.

  Examples

  span:first-of-type selects the first <span> in any element.

• Nth of type Selector

  nth-of-type(A)

  Selects a specific element based on its type and order in another
  element.

  Examples

  .example:nth-of-type(odd) selects all odd instances of the example classes.

• Nth-of-type Selector with Formula

  nth-of-type(An+B)

  The nth-of-type formula selects every nth element,starting the count
  at a specific instance of the element.

  Examples

  span:nth-of-type(6n+2) selects every 6th instance of a <span>,starting
  from(and including) the second instance.

• Only of Type Selector

  Select elements that are the only ones of their type with of
  their parent element.

  :only-of-type

  Selects the only element of its type within another element.

  Examples

  p span:only-of-type selects a <span> within any <p> if it is
  the only <span> in there.

• Last of Type Selector

  Select the last element of a specific type

  :last-of-type

  Selects each last element of that type within another element.
  Type refers to the kind of tag,so <p> and <span> are different
  types.

  Examples

  div:last-of-type selects the last <div> in every element.

• Empty Selector

  Select elements that don’t have children

  :empty

  Selects elements that don’t have any other elements inside them.

  Examples

  div:empty selects all empty <div> elements.

• Negation Pseudo-class

  Select all elements that don’t match the negation selector

  :not(X)

  You can use this to select all element that do not match selector "X"

  Examples

  div:not(:first-child) selects every <div> that is not a first
  child.

---

Attribute Selector

Select all elements that have a specific attribute.

• [attribute]

  Attributes appear inside the opening tag of an element,like this
  <span attribute="value" .An attribute don’t always have a value,
  it can be blank.

  Examples

  [type] selects all elements that have a type="anything" attribute.

• A[attribute]

  Combine the attribute selector with another selector (like the tag name selector)
  by adding it to the end.

  Examples

  a[href] selects all elements that have a href="anything" attribute.

---

Attribute Value Selector

Select all element that have a specific attribute value

[attribute="value"]

Attribute selectors are case-sensitive,each character must match
exactly.

Examples

input[type="checkbox"] selects all checkbox input elements.

---

Attribute Starts With Selector

Select all elements with an attribute value that start with
specific value.

[attribute ^= "value"]

Examples

.toy[category^="Swim"] selects elements with class toy and
either category="Swimwear" or category="Swimming".

---

Attribute Ends With Selector

Select all elements with an attribute value that ends with
specific value.

[attribute $= "value"]

Examples

img[src$=".jpg"] selects all images display a .jpg image.

---

Attribute Wildcard Selector

Select all elements with an attribute value that contains
specific characters anywhere.

[attribute *= "value"]

A useful selector if you can identify a common patter in things like
class,href or src attributes.

Examples

img[src*="/image/"] selects all images that show images from the
“image” folder.