Introduction of Blog

Hello Friends, To know about CSS Selectors , first we have to learn what is CSS? and why we use this? In this Blog we will learn about what is CSS and why we use this in our pages , In Addition of this, we will learn about the CSS Selectors and Some Pseudo Classes and Elements.

What is CSS

CSS stands for Cascading Style Sheet which is used to style up the webpages. It is used to increase experience of user from boring to colorful one, for experiencing this Let's Learn from the example

With HTML Code

As you see, With the HTML Code the webpage is looking black&white but when you use CSS, it looks beautiful. Let's see an example of HTML with CSS

With HTML & CSS Code

With the use of CSS you can make your page look and feel better it's gives you lot's of attributes to make your page beautiful and colorful like font-size, background-color, border, font-style and many more.

What are CSS-SELECTORS

CSS Selector are used to select the HTML tag that you want to style. CSS selectors select HTML elements according to its id, class, type, attribute . There are different types of CSS Selectors which we will learn in this blog.

• Individual Selector
• Id Selector
• Class Selector
• Universal Selector
• Group Selector
• Attribute Selector
• Combinator Selector
• Pseudo-Class Selector
• Pseudo-Element Selector

Individual Selector

Individual or Elementis a type of Selector which is used to style the single tag or element of HTML, for example p, h1, div, span, etc.

Syntax

h1 {
color: red;
font-size: 4px;
}

p {
color: green;
background-color: gray;
}

Example

Id Selector

Id Selector is a type of Selector which is used to style the single tag or element of HTML by declaring its Id.

Syntax

~HTML FILE
  <p> id="speci">
          A  Specification is a document that
         outlines in detail how a technology or API is intended to function and how it is accessed. 
       </ p>

We use id="speci"for declaring the class name in HTML tag.

> CSS FILE

#speci {
    color: green;
    background-color: gray;
}

we use #to call the id of the element.

Example:

Class Selector

Class Selector is a type of Selector which is used to style the single tag or element of HTML by declaring its class.

Syntax

> HTML FILE
<p class="speci">
        A  Specification is a document that
        outlines in detail how a technology or API is intended to function and how it is accessed. 
      </p>

We use class="speci"for declaring the class name in HTML tag.

> CSS FILE

.speci {
    color: green;
    background-color: gray;
}

we use .to call the class of the element.

Example:

Universal Selector

The Universal selector (*) in CSS is used to select all the elements in a HTML document. It also includes other elements which are inside under another element.

Syntax

• {
  color: red;
  padding: 1px;
  }
  

Example:

Group Selector

Group Selector is a type of Selector which is used to style the different elements at once , it will include all type of elements in one and style it.

Syntax

In this all the elements are separated with the coma ( , )

p , h5, strong ,
.myclass , #myid {
color: red;
}

Example:

Attribute Selector

You can look for elements that have a certain HTML attribute, or have a certain value for an HTML element, using the attribute selector. it is used CSS to look for attributes by wrapping the selector with square brackets ([ ]).

The CSS attribute selector matches elements based on the presence or value of a given attribute. There are different type of attribute selector which is discussed below:

• [attribute] Selector
• [attribute= "value"] Selector
• [attribute~=”value”] Selector
• [attribute|=”value”] Selector
• [attribute^=”value”] Selector
• [attribute$=”value”] Selector
• [attribute*=”value”] Selector

1. [attribute] Selector

This type of selector is used to select all the elements which have the specified value and style all those elements.

Example:

2. [attribute= "value"] Selector

This selector is used to select all the elements whose attribute has the value exactly same as the specified value.

Example:

3. [attribute~=”value”] Selector

This selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value. The attribute value which name starts with the same of other attribute value will get selected with this selector. Syntax: [attribute~=”value”]

Example:

4. [attribute|=”value”] Selector

This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen. Syntax: [attribute|=”value”]

Example:

5. [attribute^=”value”] Selector

This selector is used to select all the elements whose attribute value begins with the specified value. The value doesn’t need to be a whole word. Syntax: [attribute^=”value”]

Example:

6. [attribute$=”value”] Selector

This selector is used to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word. Syntax: [attribute$=”value”]

Example:

7. [attribute*=”value”] Selector

This selector selects all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word. Syntax: [attribute*=”value”]

Example:

Combinator Selector

A Combinator Selector are those selectors which defines the relationship of two or more elements. This selector contains two or more simple selectors. Generally, there are four different type of Combinator selector which are:

• Descendant Selector
• Child Selector
• Adjacent Sibling Selector
• General Sibling Selector Let's learn about this in detail

  Descendant Selector

  This selector is used to select all the tags which are child elements of the specified tag. This tag selects all the tag either it is the direct child of the tag or deepest element of the tag. In simple language it will select all the same tag which are present in the specified tag. Syntax: parent tag child tag{ property}

Example:

Child Selector

This selector is used to select the tags which is the direct child elements of the specified tag. This selector is stricter than descendant selector which only style it's direct child Syntax: parent >tag child tag{ property}

Example:

Let's learn about the basic difference between in descendent and child selector :

• if we use section p it will select all the p in the section whether it's in div or outside of it because all the p's are the descendent of section.
• if we use section> p it will select only the p in the section not the p in the div.

Adjacent Sibling Selector

The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag that's why it's called adjacent selector. Syntax: parent tag +child tag{ property}

Example:

General Sibling Selector

The General sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects all the independent tag that is just next to the specified tag that's why it's called general sibling selector. Syntax: parent tag ~child tag{ property}

Example:

Pseudo-Class & Elements Selector

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled. pseudo class selector syntax anchor element : pseudo class name for example button : hover In this example, button is anchor element which is followed by colon and then the pseudo property like hover which will react when the cursor in on the button. we will discuss this in our Pseudo Classes and Elements blog

// The button will change it's color when the cursor on it.
button:hover{
color : red;
}

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

Here we will discuss two elements i.e.

• ::after
• ::before

::after

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts a content in red after the content of

element:

Example:

::before

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts a content in yellow-green color before the content of

element:

Example:

Thankyou for reading this blog.......