Types of CSS Selectors

How to use css using different selectors

Types of CSS Selectors

The selectors points to the HTML element you want to set the style. The selector is the technic to give any kind of style to your text in your HTML page. There are 4 types main selectors used in HTML to point the element.

 

1. Universal Selector

2. Element Type Selector

3. ID Selector

4. Class Selector

 

Let’s look at all the different kinds of selectors available, with a brief description of each Selector.

 

1. Universal Selector

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Look at the following CSS example, which uses the universal selector:

* {
   color: white;
   font-size: 12px;
}

 

2. Element Type Selector

This selector must match atleast one or more HTML elements of the same type. Thus, a selector of nav would match all HTML elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements, or <p>. Look at the following CSS example:

ul {
   list-style: none;
   border: solid 1px #CCC;
}

p {
   color: gray;
   font-size: 16px;
}

 

This element selector CSS uses in HTML element such as:

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Foure</li>
</ul>

<p>Example paragraph text.</p>

 

3. ID Selector

This selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector. Look at the following CSS example, which uses the ID selector:

#main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

 

This ID selector CSS uses in HTML element such as:

<div id="main">Hello World!</div>

 

4. Class Selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. Look at the following CSS example, which uses the Class selector:

.main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

 

This Class selector CSS uses in HTML element such as:

<div class="main">Hello World!</div>

 

5. Descendant Selector

The Descendant selector is also the most useful of all CSS selectors. It’s declared with a dot/pound symbol  (./#) preceding a string of one or more characters. Just as is the case with an ID selector or Class selector, this string of characters is defined by the developer. Look at the following CSS example, which uses the Descendant selector:

#main .row{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

 

This Descendant selector CSS uses in HTML element such as:

<div id="main">
<div class="row">Hello World!</div>
</div>

 

One more way to use this

div .row{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

 

This Descendant selector CSS uses in HTML element such as:

<div>
<p class="row">Hello World!</p>
</div>

 

6. General Sibling Combinator

The selector that uses a general sibling combinator matches elements based on sibling relationships. Look at the following CSS example, which uses the general sibling selector:

h1 ~ div {
   margin-bottom: 20px; 
   color: red;
   font-size: 12px;
}

 

This general sibling selector CSS uses in HTML element such as:

<h1>Title</h1>
<p>Paragraph One of Legend Blogs.</p>
<p>Paragraph two of Legend Blogs.</p>
<p>Paragraph three of Legend Blogs.</p>

 

7. Pseudo-class

The selector pseudo-class uses a colon character to identify a pseudo-state. This will work on state of being hovered, or the state of being activated. Look at the following CSS example, which uses the pseudo-class selector:

a:hover {
   color: red;
   font-size: 12px;
}

 

This pseudo-class selector CSS uses in HTML element such as:

<h1>Title</h1>
<a href="index.html">A pseudo-class of Legend Blogs.</p>

 

8. Pseudo-element

The selector uses one kind of pseudo-element, the :before pseudo-element. As the name suggests, this selector inserts an imaginary element into the page, inside the targeted element, before its contents. Look at the following CSS example, which uses the pseudo-element selector:

.a:before {
   content: "*";
   display: block;
   width: 100px;
   height: 100px;
   background-color: gray;
}

 

This pseudo-element selector CSS uses in HTML element such as:

<h1>Title</h1>
<a href="index.html">A pseudo-element of Legend Blogs.</p>

 

Top