CSS Selectors - Simple CSS Selectors in detail

By Srijan 10 August, 2018
css selector
Image from Pixabay

In the last article What is CSS and how to use it, we learned basic CSS syntax and different way of including CSS in an HTML document. We also learned about CSS declaration, ruleset, and CSS Selectors.

In this article, we will discuss the CSS Selectors in detail. We will explore Simple CSS Selectors that can be used to target desired elements for styling.

Simple CSS Selectors

As it is said learning by doing is the best way to learn anything. In this article, we will learn Simple CSS Selectors by designing a Profile Card. Below is the final design.

profile card using simple css selectors
Profile Card using Simple CSS Selectors

Simple CSS Selectors directly select one or more elements on basis of the type of element, class or id. We will start learning different types of CSS selectors by editing below example document:


index.html

See the Pen QBYbLL by SRIJAN (@SRIJAN1709) on CodePen.


style.css

/* We are going to apply our CSS knowledge as we learn about Simple CSS Selectors in this article to design the profile card */

Simple CSS Selectors consists of

  • Type or element selector
  • Class selector
  • Id Selector
  • Universal Selector

Type Selectors or Element Selectors

Type Selector or Element Selector matches elements on basis of tag names. For example, to match all div elements, we will write,

div {
   .......
}

For the profile card we will add following type selectors in style.css file:

style.css

/* Center align content inside div */
div {
   text-align:center;
   margin:auto;
}
/* Setting font properties - color, size, family and weight for paragraph */
p {
   font-size:32px;
   font-weight: bold;
}

Above styles will be applied to all div and paragraph element as matched by the selectors.

Class Selectors

.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}

Class selector consists of a prefixed "." dot before the class name. Class name is defined in class attribute in an HTML element. Multiple HTML elements are allowed to have the same class value. Class selector matches all HTML elements with the same class name.

<img class="social-icon" src="./social/facebook.png" alt="facebook icon"/>
<img class="social-icon" src="./social/linkedin.png" alt="linkedin icon"/>
<img class="social-icon" src="./social/twitter.png" alt="twitter icon"/>

A single HTML element can also have multiple classes separated by a white space.

<img class="social-icon img-profile" src="./social/facebook.png" alt="facebook icon"/>

For the profile card we will add following class selectors in 'style.css' file:

.img-profile{
   max-width: 100%;
   height: auto;
}
.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}

The .img-profile class defines the style for profile image and .social-icon class styles the social icons i.e. Facebook, LinkedIn and Twitter icons.

Id Selectors

#container{
   width: 100%;
   padding:5px;
}

<div id="container">

Id selector consists of a prefixed "#" pound symbol before the id name of HTML element. Id name is defined in id attribute in an HTML element. Id should be unique in the whole document. Duplicated ids can cause unpredictable behavior.

For the profile card we will add following id selectors in 'style.css' file:

#container{
   width: 100%;
   padding:5px;
}

#card{
   max-width:320px;
   padding:5px;
   border-radius:8px;
   box-shadow:0px 1px 6px 0px #00000033;
}

These rulesets will apply unique styles to div having 'container' and 'card' id values.

Universal selectors

* {
   color:grey;
}

Universal selector '*' selects all elements in a document.

For the profile card we will add following universal selector in 'style.css' file:

* {
   font-family:sans-serif;
   color:grey;
}

Completed Profile Card

See the Pen gjqOXw by SRIJAN (@SRIJAN1709) on CodePen.


In the next article, we will explore attribute and pseudo selectors.

Recommended Reading

Useful Resources

Follow us on
Sponsored