Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to CSS Selectors

This article guides the users to use of CSS selectors. In brief, we will learn the process of using selectors to build a simple page layout.

Let us start from the very basic definition of selector. Selectors are the most important aspect of CSS. They are used to select elements on a HTML page. The selected elements thus can be styled according to the need and demand of the users. CSS selectors are of various types. Basic introduction to different type of selectors is as follows:

  • Type Selector: This is the most basic type of selector which is used by the users. This selector helps the user to select any HTML element on a page that matches the selector, irrespective of the position of the elements in the document tree.
  • Class Selector: This type of selector is used to those types of HTML elements which has a class attribute.
  • ID Selector: These selectors are very similar to the class selectors. The only difference is that ID selector can only be applied once per page, while class selector can be applied as many times as required by the user. These types of selectors are well supported across standards – compliant browsers.
  • Descendant Selector: Descendant Selectors are used to select those elements that are the descendants of another element in the document tree.
  • Child Selectors: These selectors are used to select an element that is a direct child of another element. The other element is known as parent element. The advantage of using child selector is that it does not select all the descendants. Only direct child are selected in this category.
  • Universal Selectors: This selector is used to select any element, regardless of the position of the elements on the document tree.
  • Adjacent Sibling Selector: This type of selector is used to select the sibling immediately following an element. Adjacent Sibling Selectors are not compatible with all type of browsers.
  • Attribute Selectors: Before discussing these types of selectors, it is important for the users to understand the concept of attributes. All the HTML elements have certain set of associated properties linked to them. These associated properties are known as attributes. An element can have any number of attributes used in an element tag. But for using more than one number of attribute, these attributes are to be separated using spaces. So, attribute selectors are used to select elements based on their attributes and their attributes value. In total, we can use four types of attribute selectors. They are as follows:
    • Selection based on attribute.
    • Selection based on value.
    • Selection of space separated instances of a value.
    • Selection of hyphen separated instances of a value.

    Attribute Selectors are not supported by the earlier version of browsers.

  • Pseudo-Classes: Pseudo-Classes are used in the case when there are no CSS selectors available for the user to use. It allows the users to format items are not listed in the document tree. For example, :first-child, :link, :visited, :hover, :active, :focus and :lang.

In this article, we will be briefly discussing the first four type of selectors i.e., type selector, ID selector, Class selector and descendant selector. In order to start the process of using CSS selectors, user needs to create a page. The first step is to create a blank document. In this write an XHTML code. The document should be saved using any preferred name by the user. Let us suppose the name of the saved file is “usingCSS-selectors.htm”.

Listing 1: Shows the HTML code to create the “usingCSS-selectors.htm” file.

<!DOCTYPE html PUBLIC "-//MRBOOL//DTD XHTML 1.0 Transitional//EN"
 "http://www.mrbool.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.mrbool.com/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Selectors</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
 
<body>

<h1><font color="red">CSS Selectors</font></h1>

<div id="intro">
<p><font color="yellow">This indicate<em>first</em> paragraph.</font></p>
<p class="important"><font color="red">This is an <em>important</em> paragraph inside the Intro Div.</font></p>

</div>

<p><font color="blue">This shows a regular paragraph.</font></p>
<p class="important"><font color="purple">This show <em>important</em> paragraph that is not in the Intro Div.</font></p>

</body>
</html>

After saving the file, the next step is to open the “usingCSS-selector.htm” in a web browser. After opening the file, the opened file will be similar to figure 1.

Shows the screen shot after opening the file “usingCSS-selector.htm”

Figure 1: Shows the screen shot after opening the file “usingCSS-selector.htm”.

Now, we have performed the task of creating a blank document. Now, let us begin using CSS selectors. The first step here is to again create a blank document and save it in the same folder where “usingCSS-selector.htm” file is saved. Let us name the file as “different-selectors.css”. After this type, we will apply the four different types of selectors which we have studied above. Let us begin with Type Selector.

As we have studied, type selectors are the most basic and simplest type of selectors to be used. In order to use this selector, type the following code in “different-selectors.css” file.

Listing 2: Shows the code to be added in “different-selectors.css” file

body {
font-family: Arial, corbel;
font-size: small;
}

h1 {
color: pink;
}

em {
color: cyan;
}

The above code will help the user to select and style the following elements on the page:

  • <body> elements;
  • <h1> elements;
  • <em> elements.
Shows the screen shot after using the type selector

Figure 2: Shows the screen shot after using the type selector

Now, let us discuss ID selectors. For this, user needs to have a look at the “usingCSS-selector.htm” code again. Users will see that we have a <div> element with an ID of intro. This element acts as an ID for the intro section of our page. In brief, ID selectors are used to define the uniqueness of the element. So, in order to access the ID, users need to add (#) in front of its ID’s value. To access this type of selector, add the code in “different-selector.css” file. The code must be added directly below the <h1> rule.

Listing 3: Shows the code to use ID selectors

#intro {
font-size: 150%;
border: 1px solid blue;
}
Shows the screen shot after using ID selector

Figure 3: Shows the screen shot after using ID selector

Now, let us discuss Class selectors. These selectors are very similar to ID selectors. We will differentiate both the selectors later. Let us learn to use this selector first. Users will notice that two of our paragraph tags have a class of “important.” When an element has a class we can access it with a CSS selector by placing a period in front of its class name. Let us add the following code to “different-selectors.css” file in order to use the class selectors.

Listing 4: Shows the code to be added for using Class selector

.important {
background-color:blue ;
}
Shows the screen shot after using Class selector

Figure 4: Shows the screen shot after using Class selector

Now let us discuss the differences between ID and class selectors. Some of them are as follows:

  • Class selector can be used as many times as needed in a document whereas the ID selector can only be used once in a document.
  • Class selectors have a wide range of applications than ID selectors.
  • Multiple class selectors can be used to style a HTML element whereas only one ID selector can be used while styling an HTML element.
  • Last but not the least; ID selectors have higher specificity than class selectors.

After this, next come the Descendant selectors. In order to understand this, let us take an example. Suppose, if the user wants the important paragraph in the “intro” Div to look different than the important paragraph at the bottom of the page. In such a case, Descendant selector can be used by adding the following code to the “different-selectors.css” file.

Listing 5: Shows the code to be added to use Descendant selector

#intro .important {
background-color: black;
}
Shows the screen shot after using Descendant selector

Figure 5: Shows the screen shot after using Descendant selector

The above code is working in this way. First of all, it starts with “#intro” which will select the Intro Div. This is followed by a space, and then “.important.” So essentially the used selector is telling the web browser to do the following tasks:

  • Find the element with the ID of intro; and
  • To go inside that element and find any elements with the class of important.

Now, the colors inside the black paragraph can also be changed. Suppose, if the user wants to change the colour of word important to white from sky blue. To do this, following code is added.

Listing 6: Shows the code to perform the above specified task

#intro .important em {
color: white;
}
Shows the screen shot after applying the listing 6

Figure 6: Shows the screen shot after applying the listing 6

Conclusion

Finally, in the article we have learnt about the different type of CSS selectors that can be used to style a HTML element. Hope you like reading it!



I have done my bachelor in Computer Science and I am well versed with programming languages such as JAVA, C#, html and done courses on Android development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login