CSS Selectors with examples

CSS Selectors

Selector is a syntax to select the element.First we have to select the element and then we have to apply style.

  1. Tag selector
  2. Id selector
  3. Class selector
  4. Compound selector
  5. Grouping selector
  6. Child selector
  7. Direct child selector
  8. Attribute selector

Tag Selector: It selects all instances (examples) of a specific tag.

Syntax: tag

Id selector: It selects single instance of the specific tag, based on id.

Syntax: #id

Class selector: It selects few elements that are having a specific class.

Syntax:    .class name

Compound selector: It selects one or more elements based on tag name and class name.

Syntax:  Tag. class name

Grouping selector: It selects a set of tags.

Syntax: tag1, tag2, tag3 ………

Child selector: It selects all instances of the specific child that are present inside the specific parent. (including grandchildren)

Syntax:   parent child

Direct child selector: It selects all the direct children of the specific parent. (excluding grand children)

Attribute selector: it selects the element based on the attribute value.

Syntax: tag[attribute=”value”]

Hover selector: It applies the style only when the user places mouse pointer on the element.

Syntax:   tag name. hover

Read more

Click here to download with examples

Updated: May 15, 2019 — 8:23 pm

Leave a Reply

Snehajobs.com © 2019 All Rights Reserved