Analogically we can understand the designing of a web page as a construction of a room where HTML can be compared with bricks used to provide the structure of that room.
CSS adds styling to the web page that can be compared with painting, adding curtains and decorating the room.
Javascript adds behavior to a web page, functionalities such as lights inside the room.
All HTML, CSS, and JS together help us to design a web application.
Proper Styling of our room will definitely bring more customers to us, and the same works when we style our web pages better that attract more number of users.
Apart from some basic selectors like class and id, there are some CSS selectors that can help us to write effective CSS code. Let's compare them with their use cases.
This styling will work on all child element that are nested under the parent element without considering the level of nesting.
<!-- HTML-->
<div>
<span>
<p> Inside span 1 </p>
</span>
<span>
<p> Inside span 2 </p>
</span>
<span>
<p> Inside span 3 </p>
</span>
<span>
<p> Inside span 4 </p>
</span>
<p> Inside div and outside span </p>
</div>
/* Use this selector when you have to select all
p elements inside a div regardless of their nesting level */
div p {
color: #ff7f50;
}
This styling will work for nested elements after writing the nested levels. The nested level can be reached by using >.
To apply the styling to the <p> tag using > can be applied as:
div > span > p {
color: #ff7f50;
}
But what will happen if we use div > p. This will strictly select only those <p> elements which are in div but will leave those which are nested one level down in <span>.
This styling will be applied to the first element that comes immediately after the other element. Here, p is the first element that comes immediately after div. We can also say that <p> is the immediate sibling of <div>.
<style>
div + p {
color: green;
}
</style>
<body>
<div>
<span>
<p> Inside span 1 </p>
</span>
<span>
<p> Inside span 2 </p>
</span>
<span>
<p> Inside span 3 </p>
</span>
<span>
<p> Inside span 4 </p>
</span>
<p> Inside div and outside span </p>
</div>
<p> Outside div and Immediately after </p>
<p> Outside div and Not Immediately after</p>
</body>
To understand this, we changed our HTML. This style works on all elements which are the sibling of the other element. There is no need to be the immediate sibling in this case.
<!-- HTML -->
<body>
<div>
<span>
<p> Inside span 1 </p>
</span>
<span>
<p> Inside span 2 </p>
</span>
<span>
<p> Inside span 3 </p>
</span>
<span>
<p> Inside span 4 </p>
</span>
<p> Inside div and outside span </p>
</div>
<p> Outside div and Immediately after </p>
<p> Outside div and Not Immediately after</p>
<span>
<p> Nested inside span</p>
</span>
<p> Not an immediate sibling </p>
</body>
div ~ p {
color: green;
}
The styling will not be applied to <p> which is outside <div> but nested inside <span> as it is not a sibling of <div> element.
If we know how to write CSS effectively, then it is very easy to write less code which will make the web pages faster. CSS is easy to learn but hard to master.