HTML, CSS, and JavaScript help to build a flexible and lightweight web page. Although the whole process takes some skill and time, the result is a highly customizable website. Familiarity with the basics of CSS proves helpful for anyone interested in creating a personalized website. In this article, we will go through one such building block of CSS, which is Selectors.
What are CSS Selectors?
HTML defines the main structure of a webpage. The hierarchy of HTML elements dictates the place of each element. CSS adds styling to each of these elements. CSS selectors help with this styling. A CSS selector indicates which elements to select for a particular styling. A designer may want the text of all of the paragraphs of a webpage in black, but one in particular should appear highlighted; or all of the web links on a page should appear blue, and the ones visited should become green; or some text should appear highlighted if the user places a mouse cursor on it. Such styling requires that a designer has fine control over all the elements present on a webpage. CSS selectors provide such control. Some CSS selectors cover a broad selection of elements for styling, while others are more specific. There are some CSS selectors which are an absolute must for any aspiring web designer or a front-end developer to know. Let’s go through them.
We will start with CSS selectors that broadly select elements and narrow them down to some specific ones.
Universal Selector
As the name indicates, this selector has a universal effect. It applies the defined styling to all the HTML elements.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
color: blue;
background-color: yellow;
font-style: oblique;
}
</style>
</head>
<body>
<div>
<p>We all have same CSS styling.</p>
</div>
<div class="div1">
<p>We all have same CSS styling.</p>
</div>
<div id="diffdiv" class="div1">
<p>We all have same CSS styling.</p>
</div>
</body>
</html>
The above CSS has styled all of the elements, including divs and paragraphs. The whole body tag selects for universal styling. This is why we see the full page turn yellow!
The universal selector is also used to select all of the children of an element. The following styling applies to all of the child elements of a div.
div *{
color: blue;
background-color: yellow;
font-style: oblique;
}Type Selector
Another general CSS selector is a type selector. The defined CSS styles are applied to the elements of a specific type. For example, to all of the <a> tags or <p> tags.
p {
color: green;
background-color: yellow;
font-weight: bold;
}
Class Selector
If there are multiple HTML elements and all of them should appear in a similar style on a webpage, we put them under a class name. The class selector then selects all these class elements and applies a similar styling to them.
Id Selector
The id selector narrows the element selection further. The id for all of the elements is unique. No two elements can have a similar id, which means even if two elements belong to the same class, and an id selector is defined for one of them, we can style it uniquely. This gives more control to a designer over the elements and their intricate styling. Below we have provided an elaborate example of styling different elements with the same class but a different Id.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
font-style: oblique;
font-size: 20px;
font-family: monospace, sans-serif;
background-color: yellow;
}
.div1{
border: solid black;
}
#diffdiv{
font-weight: bold;
border: dotted blue;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div>
<p>I am the first div.</p>
</div>
<div class="div1">
<p>I am the second div with a class name.</p>
</div>
<div id="diffdiv" class="div1">
<p>I am the third div with div1 class and diffdiv Id.</p>
</div>
</body>
</html>
Attribute Selector
An attribute selector selects HTML elements with specific attributes or attribute values. For example, a website developer wants to style all of the input properties with type attributes uniformly, except for the type value of a button:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
font-style: oblique;
font-size: 20px;
font-family: monospace, sans-serif;
background-color: gray;
color: white;
}
input{
margin-bottom: 10px;
margin-top: 10px;
border: solid black;
display:block;
}
input[type=button]{
font-weight: bold;
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<div>
<form id="form">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="pswd" placeholder="Password">
<input type="button" value="OK">
</form>
</div>
</body>
</html>
The above code styles the text and password type inputs similarly, but makes the button input unique. It has a light blue color and bold font.
Combinators
Elements can be selected in a combination as well. For example, select an element and its first child only or select only direct children of a specific element, etc.
X + Y:
Selects y preceding x. For example, the link tag preceding a <p> tag.
X Y and X > Y:
X > Y selects the direct descendants Y of X, unlike in X Y, where all the elements under the X are selected.
The following code explains the difference.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
font-style: oblique;
font-size: 20px;
font-weight: bold;
font-family: monospace, sans-serif;
}
p > a{
font-style: italic;
color: yellow;
}
</style>
</head>
<body>
<div>
<p>These are some Wikipedia Pages.
<a href="https://en.wikipedia.org/wiki/CSS"> CSS Wiki</a>
<a href="https://en.wikipedia.org/wiki/HTML"> HTML Wiki</a>
</p>
</div>
</body>
</html>
To see the difference, we can take the HTML wiki link out of the p tag. This time only <a> inside p is selected as it is the direct child.
<div>
<p>These are some Wikipedia Pages.
<a href="https://en.wikipedia.org/wiki/CSS"> CSS Wiki</a>
<div>
<a href="https://en.wikipedia.org/wiki/HTML"> HTML Wiki</a>
</div>
</p>
</div>
Pseudo Selectors
A pseudo selector selects elements in a specific ‘state’. For example, select the visited links, select the focused input field, or select the element on a mouse ‘hover’. In these and other states, different styling applies to highlight the elements. It gives a visually appealing and interactive experience to the user.
a:visited{
color: gray;
}
p:hover{
background-color: lightgreen;
}Adding these styles to the previous code will turn the visited links gray. Also, when we hover our mouse over a paragraph, it turns light green. It is pseudo selection.
Some other pseudo selectors are after, checked, first-line (in a paragraph), first-letter, etc.
CSS selectors can also be grouped if they have the same styling. They are separated by a comma such as:
a:visited, p:hover{
background: gray;
}Summary
In this article, we discussed one CSS building block - CSS Selectors. CSS selectors help with the precise styling of a webpage. With a large webpage, rules may get a little overwhelming to remember, but with practice, CSS selectors offer a fast way to customize a webpage with more control over each of the web elements.
