CSS Selectors

The CSS selector helps find (or select) elements from HTML document for style purpose. W3c has listed all the possible kinds of CSS selectors that you can use in your CSS documents, but only few are them are used frequently. For a complete list of CSS selectors visit W3c – CSS3 selectors.

Advertisements

Here is a list of selector types, important for any web designer working with CSS and HTML.

  1. Universal Selectors
  2. Element Selectors
  3. Class Selectors
  4. ID Selectors
  5. Combinator Selectors
  6. Pseudo-Classes

You will find examples for each selector that you can practice and understand the concept easily.

Universal CSS selectors (*)

The universal selector applied to all the elements. You can also use it for a particular element. You can select all elements with another HTML element using universal CSS selector. The scope of selection is narrowed in the later case.

Element CSS selectors (p, h1, h2)

You can apply css rule to HTML element directly using the element selector. Select the element and then create rules for individual properties of the element. Certain properties apply only to a specific element. There are two ways to select elements.

CSS for single element

In this case, you apply rules only for a single element. For example

p {
    text-align: center;
    font-size: 2em;
}

CSS for group of elements

CSS allows to select more than one HTML elements. Therefore, you can apply css rules to a set of elements. For example

p {
    text-align: left;
    color: gray;
}
h1 {
    text-align: left;
    color: gray;
}

h2 {
    text-align: left;
    color: gray;
}

You can create a common css rule for p, h1 and h2.

p, h1, h2 {
    text-align: left;
    color: gray;
}

This would save rewriting the CSS rule multiple times.

Class  CSS selectors

The element selector gives the option to select more than one element. Another way to style a group of elements or a block in HTML is using the class selector. The class selector finds only those elements where a particular class name is used and applies the CSS rules on that class.

CSS code

. <user-defined class name> {
    declaration1;
    declaration2;
}

HTML Code


<div class="user-defined class name">
    <! -- Other HTML elements -->
</div>

Example Class Selector

In this example, we will create an HTML page with four blocks and give each block a different style. You need to download and install Notepad++ software on your computer. Then follow the steps given below.

Step 1: Create a folder called “Class-Selector”.

Class Selector Folder
Class Selector Folder

Step 2: Open Notepad and create a file called Style.css and save it inside Class-Selector folder.

Style.css file - Class CSS Selector
Style.css file – Class CSS Selector

Step 3: Insert following CSS code into Style.css and save it.

.block1 {

     background-color: black;
     color: white;
     font-size: 18 px;
     height: 200px;
}
.block2 {
    background-color: darkred;
    color: white;
    font-size: 18 px;
    height: 200px;
}
.block3 {
    background-color: darkgreen;
    color: yellow;
    font-size: 18 px;
    height: 200px;
}
.block4 {
    background-color: magenta;
    color: white;
    font-size: 18 px;
    height: 200px;
}

Step 4: Create a new file called Index.html and save it in  Class-Selector folder.

Index.html - Class CSS Selectors
Index.html – Class CSS Selectors

Step 5: Open the index.html file using notepad and insert following code and save it again.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class Selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block1">
        <h2>BLOCK 1</h2>
    </div>
    <div class="block2">
        <h2>BLOCK 2</h2>
    </div>
    <div class="block3">
        <h2>BLOCK 3</h2>
    </div>
    <div class="block4">
        <h2>BLOCK 4</h2>
    </div>
</body>
</html>

Step 6: Open the file in a browser.

Result of Example Code

Result of Class CSS Selectors
Result of Class CSS Selectors

Id CSS Selector

When you select a group of element or apply CSS on a class selector. You want just one element or a few element to appear unique or different from the rest of the group. These HTML elements could be selected using the ID selector and you can apply separate CSS rules for them.

There is another benefit of using ID selector, they are popular among JavaScript programmer. The JavaScript use ID selector to select form elements and write unique code for them.

Advertisements

Learn Basic JavaScript

Example of ID Selector

In this example, you will create an HTML page with one block and a single element with ID selector. Then apply CSS rules on it.

Step 1: Create a folder called “ID-Selector”.

ID Selector Folder
ID Selector Folder

Step 2: Open notepad and create a new file called style.css and save it in ID-selector folder.

Style.css - ID CSS Selectors
Style.css – ID CSS Selectors

Step 3: Open the style.css file and insert the following code and save it.

.block {
    background-color: black;
    color: white;
    height: 200px;
}
#head{
    font-size: 24px;
    text-align:center;
}

Step 4: Open notepad and create a new file called index.html and save it in ID-Selector folder.

Index.html - ID CSS Selectors
Index.html – ID CSS Selectors

Step 5: Copy the following code in to the index.html file and save it.

<!DOCTYPE html>
<html>
<head>
    <title>CSS ID Selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block">
        <h2 id="head">ID Selector</h2>
    </div>
</body>
</html>

Step 6: Open index.html file in a browser and verify the results.

Result of Example – ID selector

Result of Example - ID CSS Selectors
Result of Example – ID CSS Selectors

The Selectors find the elements based on a Document Object model or document tree which is an API ( Application Programming Interface) for HTML called HTML DOM. It describes the structure of the document and how to access the DOM tree. The Document Object Model treat the HTML document as a tree structure. Each element in this tree is an object.

Combinators CSS Selectors

Another type of selector in CSS is called Combinators. It checks whether the element is a child, descendant or sibling in the document tree.

Syntax of Combinators

E F - where F is descendant of E
E > F - where F is child of E

Example of Combinators

In this example, you will create an HTML element with a list and then change style for the list elements.

Step 1: Create a folder called Combinators.

Combinators Folder
Combinators Folder

Step 2: Open Notepad and create a file called “style.css” and copy following code into the file and save it.

.list {
    background-color: blue;
    padding: 20px;
    list-style:none;
}
.list li {
    background-color:cyan;
    padding: 10px;
    margin: 2px;
}
Style.css - ID CSS Selectors
Style.css – ID CSS Selectors

Step 3: Open notepad and create a file called index.html.  Now copy following code in index.html and save it.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Combinator Selectors</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul class="list">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
</body>
</html>

Step 4: Open the index.html file in a browser and verify  the results.

Result –Combinators Selector

The result of the above code is given below.

Result of Example - Combinator CSS Selectors
Result of Example – Combinator CSS Selectors

Pseudo-classes CSS Selectors

This is another group of elements that does not belong to the document tree. These selectors are outside of document tree, hence, in CSS you use them with a colon ( : ).

E: hover, :active, :focus – where hover is an user-action pseudo-class and E is the element.

E: visited,: link – where visited and link are a link pseudo-classes and E is the element.

References

  • Editor: Jonathan Robie, Texcel Research. n.d. Document Object Model. Accessed 4 19, 2018. https://www.w3.org/TR/WD-DOM/introduction.html.
  • Etemad, Elika J., Tantek Çelik, Daniel Glazman, and Ian Hickson, . 2018. Selectors – 3. January 30. Accessed 4 19, 2018. https://www.w3.org/TR/selectors-3/.
  • W3schools. n.d. CSS Tutorial . Accessed 4 18, 2018. www.w3schools.com.

Advertisements

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.