CSS Selectors

css selectors

CSS SELECTORS

A CSS selectors is a CSS rule set that selects the content which you want to style. There are different kinds of selectors available,

Selectors are used to target the HTML elements on our web pages that we want to make style.

css selectors

Different Types of selectors

  • Universal Selector
  • Element Type Selector
  • ID Selector
  • Class Selector
  • Descendant Combinator
  • Child Combinator
  • General Sibling Combinator
  • Adjacent Sibling Combinator
  • Attribute Selector
  • Pseudo-class
  • Pseudo-element

UNIVERSAL SELECTORS:

The universal selector is same as a wild card character, will select all elements on a page. Every page is built by the HTML tags. Each tag represents an element on the page. Following CSS example, uses the universal selector

Example:
universal selectors

ELEMENT TYPE SELECTOR:

Element Type Selector is a selector that matches the name of a document element type. This selector element matches instance of the element in the document tree.

Example for Element Type Selectors:
Element Type Selector

ID SELECTOR:

ID selector is declared by using a hash symbol (#) preceding a string of characters. The selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol

Example:

id selector

CLASS SELECTOR:

The class selector is very important of all CSS selectors. It’s declared with a dot(.). Same as an ID selector, this string of characters is defined by the developer. The class selector matches all elements on the page that have their class attribute.

Take the following rule set:
class selector

DECENDANT COMBINATOR:

The descendant combinator combines two or more selectors. So that you can be more specific when you are in selection method.

decendant combinator

CHILD COMBINATOR:

Child combinator is same as selector that uses a descendant combinator, But it only targets immediate child elements only:
#container > .box

child combinator

 

GENERAL SIBLING COMBINATOR:

General sibling combinator matches the elements based on the sibling relationships. The selected elements are in the HTML.

General Sibiling Combinator

 

General sibling combinatory selector is declared using the tilde character (~).

ADJACENT SIBLING COMBINATOR:

Adjacent sibling combinator uses the plus symbol (+), and is same as the general sibling selector. The difference is that targeted element must be an immediate sibling, not just a general sibling.

Let’s see the example for Adjacent Sibling Combinator:

adjacent sibling combinator

ATTRIBUTE SELECTOR:

This Attribute selector targets elements based on and/or value of HTML attributes, and is declared using square brackets []:

attribute selector

 

 

No space before the opening square bracket unless you intend to use it along with a descendant combinator.

PSEUDO CLASS:

A pseudo-class uses a: character to identify a pseudo-state

For example, the state of being hovered, or the state of being activated.

Let’s look at an example of Pseudo class:

pseudo class

PSEUDO ELEMENT:

CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. The only difference is that this selector is quite different from the other examples.

Let’s see a pseudo-element in context:

pseudo element

 

 

 

 

 

Click here to Know the Difference Between the Class & Id

Please follow and like us:
500

Leave a Reply

Your email address will not be published. Required fields are marked *