What are selectors and their types in CSS (cascading style sheet)?

Selectors in CSS

There are some rules, to use CSS in your code in a better way. A cascading style sheet comprises rules to style your document that are interpreted by the browser and then applied to the corresponding elements in your document. Before proceeding to next topics of CSS, it is necessary to understand, What are selectors and their types in CSS (cascading style sheet)?

A style rule is made of three parts

Selector – An HTML tag to which style has to be applied is called a selector. It may be any HTML tag. For example-heading tags (H1-H6), DIV, paragraph tag etc.

Property −A property is nothing but an attribute which is to be given to HTML tag. They could be color, border etc.

Value – Values applies to the properties of HTML tags.  For example, color property can have value either red, black, green etc.

You can put CSS Style Rule Syntax as follows

selectors in CSS, www.programmingtutorial.in

Here table is a selector and border is a property and given value 2px solid with colour set as black is the value of that property.

Selectors can be defined in various types.

1. The Type Selectors

This is the basic selector and can be defined by individual HTML tag. For example, setting properties and their attributes to the tags directly.

h1 {
   color: red;
   font-family:arial; 
    }

2. The Universal Selectors

applied to all the selectors by just choosing universal selector. (*) represents universal selector. Whatever values you set, they will apply to all the selector presented in your code. For, example

*{ 
   color: black;
   margin:0px;
   padding:0px; 
   }

3. The Descendant Selectors

Suppose you want to apply a style rule to a particular element only which lies inside another element. You can do that with the help of descendent selector.

ul em {
       color: black; 
       }

4. The Class Selectors

This is a most important selector and widely used while developing your code. You can define the attributes of more than one HTML elements with the help of class selector. A same class selector can apply to many HTML elements. If you give some values to the properties of class selector, they will automatically applied to the HTML element to which you have applied that particular class. The class selector is defined with the help of (.) operator. Let us take a simple example of class selector.

.container{
           color: black;
           font-family:verdana; 
           }

The above selector (.container) class will apply font color as black and font family as verdana. This will apply to all HTML elements to which this container class is given.

Now, the condition may arise when there is need to set attributes only for a few tags which are a part of class. We can do for that part also. For example.

h1.container {
   	      color: red; 
             }

This rule will apply to the content for <h1> elements only with class attribute set to container.

You can apply more than one class selectors to given element. Consider the following example.

<p class = "container private">
Two classes are applied in this paragraph container and private.
</p>

5. The ID Selectors

This is another most important selector and it applies to a single HTML element. One ID selector one element i.e if you are using ID then it is used for one element only. If you want to set properties for another element then you can set it with another ID. It is defined by # sign.

#container{
           color: black;
           font-family:verdana; 
           }

This rule renders the content in black for every element with id attribute set to container in our document. You can make it a bit more particular.

H1 #container{
               color: black;
               font-family:verdana; 
               }

This rule will apply the properties to the content in black for only <h1> elements with id attribute set to container.

6. The Child Selectors

This selector works almost like descendent selector except one change, it applies the properties to the direct child of body.

body > p {
         font-family: red; 
          }

7. The Attribute selector

If you want to apply style to a particular attribute of an HTML element, then you can use attribute selector. For example.

input[type = "text"] {
                   font-family: verdana; 
                     }

The advantage of attribute selector is that, it will not affect other attributes of input tag.

8. Multiple Style Rules

While developing your web page you may need to apply multiple style rules to a single element. You can define these rules with the combination of different properties to an HTML element.

h1 {
   font-weight:normal;
   color:green;
   margin-bottom: 5px;
   text-transform: lowercase;
   }

9. Grouping selectors

You can apply a set of properties declared, to many selectors. The same property value pairs will apply to all the selectors if you want to apply. The selectors will be separated by comma.

h1, h2, h4 {
   font-weight:normal;
   color:green;
   margin-bottom: 5px;
   text-transform: lowercase;
   }

Id selectors can also be grouped together.

#container, #blank, #required {
                  left: 510px;
                  width: 200px;
                }

We covered all the selectors and saw, What are selectors and their types in CSS (cascading style sheet)?