CSS Selectors

CSS Selectors Or CSS Syntax

CSS is a style sheet ,it defines the style of the web page in separate document.CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document.

The CSS rule has three parts , as follow:-

• Selector
• property
• value

Selector

A selector is a HTML element which need some modification. In HTML, we can simply modify all the elements like, headings. If you want to give style to only headings like h1,you can use h1 as selector.Basically , h1 is the name of HTML element whom you want to format.

Property

Property is like attributes in HTML. They specify additional behavior of the elements. A property is used to set the certain things about a selector. For example, setting color of a text. 

Value

Value gives the value to a property.If you want to set color using color property, you need to define the value of color as red.

For example, the heading  color can be define as:

h1         {   color     : orange;}
Selector    Property:Value

The selector  points to the element you want to style. Property  can be anything such as color, background, background color, background image etc.

Note - The declaration block contains one or more declarations, separated by semicolons.Each declaration includes a property name and a value, separated by a colon.

Types of Selectors

Selectors are of following types:

1.Type Selectors

      The most common and easy to understand selectors are the  type selectors. This selector targets element types on the page. If we use paragraph element p as selector, it will format all the p elements. 

For example, to target all the paragraphs on the page:

p{

color: red;

font-size:130%;

}

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

   

 2.Id and Class Selectors

We can use ID attribute in HTML to give some identity to the elements. Id selectors allow you to style HTML element that has an ID attribute, regardless of their position in the document tree. Here is an example of an id selector:

The HTML Code:

<div id="intro">
      <p> This paragraph is in the intro section</p>
</div>
<p>This paragraph is not in the intro section</p>

The CSS code:

#intro {

      color:white;

      background-color:gray;

}

To select an element with a specific id, use a hash character, and then follow it with the id of the element.

Result:

Class selectors works in similar way. The major difference is that IDs can only be applied once per page, while class can be used as many times on a page as needed. We can give class name to the elements using class attribute of HTML.

In the example below,both paragraphs having the class "first" will be affected by CSS:

The HTML Code:

<div>
<p class="first"> This is a paragraph</p>
<p>This is the second paragraph.</p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section.</p>

The CSS Code:

.first{font-size:200%;}

To select a element with a specific class, use a period(.) character, followed by the name of the class.

Do not start a class or id name with a number!

Result:

3.Descendant Selectors

These selectors are used to select elements that are descendants of another element. When selecting levels,you can select as many levels deep as you need to.

For example, to target only <em> elements in the first paragraph of the "intro" section:

The HTML:

<div id="intro">

<p class="first">This is a <em> paragraph</em></p>

<p>This is the second paragraph.</p>

</div>

<p class="first">This is not in the intro section</p>

<p>The second paragraph is not in the intro section.</p>

The CSS:

#intro .first em{

    color:pink;

    background-color:gray;

}

 Result:  

            As a result, only the elements selected will be affected:

These are rules and selectors of CSS.Try it yourself!