CSS 3 Selectors

A selector is a pattern that is used to select an element to apply the CSS style rules. The different types of selectors in CSS 3 are as follows:

The Universal Selector

• The universal selector is used to select all elements present in HTML document.
• The asterisk(*) symbol is used to represent the universal selector, as *{ }
• The universal CSS selector is not so often used alone. It is more often used with a child selector or descendant selector.
• Example: * { font-size: 18px; } It selects all HTML elements and set their font-size

The Type Selector

• The type selector matches all the elements specified in a list with the given value to determine the elements to which the CSS rules are to be applied.
• Example: h1, h2, p { font-family: sans-serif; } Here font-family property applied on h1 & h2 heading elements and also on paragraph element(P).

The Class Selector

• The class selector is another very commonly used CSS selector. The class selector selects all HTML elements which have the given CSS class set on them.
• Example: We have h1 element with class attribute whose value is ‘abc’.<h1 class=”abc”>Header 1</h1> Class selector can be used in following two different ways:
  • Applying the CSS rule to all elements that have the class attribute of the same value: .abc { font-family: sans-serif; }
  • Applying the CSS rule to the only those h1 elements whose class attribute contains ‘abc’ as its value: h1.abc { font-family: sans-serif; }

The ID Selector

• The ID selector selects the HTML element which has the given ID. The value of the id attribute is unique within a document; therefore, the selector is applied only to the content of one element.
• Example: We have h1 element with id attribute whose value is ’header’.<h1 id=”header”>Header 1</h1>
  • To select this HTML element using an ID selector, prefixing the CSS selector with a # symbol and then write the ID of the HTML element.
  • Here is an example that selects the above HTML element by its ID #header { font-family: sans-serif; }

The Child Selector

• The child selector is used to select all elements that are immediate children of some other element.
• In the child selector, the greater than symbol (>) is used as the combinator.
• Example: li>a { font-size: 18px; } It selects all 'a' elements which are children of 'li' elements.

The Descendant Selector

• The descendant selector is used to select elements that are descendants of other elements.
• The selected elements do not have to be immediate children of the specified ancestor. They just have to be nested inside the ancestor somewhere. That is how descendant selectors are different from child selectors.
• In descendent selector, white space is used as the combinator.
• Example: table b { font-family: sans-serif; } It applies CSS to all the 'b' elements that are nested within the table element.

The Adjacent Sibling Selector

• The adjacent sibling selector is used to select HTML elements that are adjacent siblings of some other HTML element.
• Sibling elements must have the same parent element.
• To use an adjacent sibling selector, the plus (+) symbol is used as its combinator.

• Example: h1+p { font-family: sans-serif; } This CSS code is applied on following HTML code

  <h1>Heading 1</h1>
  <p>The selector above matches this paragraph</p>
  <p>The selector above does not match this paragraph</p>
  

The Attribute Selector

• The attribute selector is used to select HTML elements on the basis of some specific attributes or attribute values, such as

  • [attribute] - Selector is used to select elements with a specified attribute. Eg. a[target] { background-color: yellow; } it selects all <a> elements with a target attribute.

  • [attribute="value"] - Selector is used to select elements with a specified attribute and value. Eg. a[target="_blank"] { background-color: yellow; } it selects all <a> elements with a target="_blank" attribute.

  • [attribute|="value"] - Selector is used to select elements with the specified attribute starting with the specified value. Eg.[class|="top"] { background: yellow; } it selects all elements with a class attribute value that begins with "top".

  • [attribute~="value"] - Selector is used to select elements with an attribute value containing a specified word. Eg. [title~="flower"] { border: 5px solid yellow; }it selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower".

  • [attribute^="value"] - Selector is used to select elements whose attribute value begins with a specified value. Eg.[class^="top"] { background: yellow; } it selects all elements with a class attribute value that begins with "top".

  • [attribute*="value"] - Selector is used to select elements whose attribute value contains a specified value. Eg. [class*="te"] { background: yellow;}it selects all elements with a class attribute value that contains "te".