CSS Calc(), CSS Clip, and CSS Descendant Selector
CSS Calc()
We can perform calculations using this built-in CSS Calc() function. It performs addition (+), multiplication (*), subtraction (-), and division (/) using the four basic arithmetic operators. It can compute angles, lengths, percentages, times, numbers, and integer frequencies.
It is a strong CSS idea because it enables us to mix different units, like percentage and pixel.
Values
The outcome of the single parameter expression required by this CSS function will be used as the value. The expression must be defined. Any straightforward expression using the four arithmetic operators (+, -, *, /) is acceptable.
NOTE:
- Always use whitespace around the mathematical operators add (+) and subtract (-). Any other case will result in the expression being deemed invalid. For instance, because calc(60%-4px) is parsed as a percentage, followed by a negative length, it will not work. In contrast, the expression calc(60% - 4px) will be translated into a length and a subtraction operator.
- Although the operators * and / do not need whitespace, adding it is advised for consistency.
- The calc() function can be nested.
Example 1- A Simple Example
In this example, the div element's width and height are specified using the calc() function. There is a subtraction in the expression of the calc() function with the same units.
The expression result will be considered when determining the property's value so that the width will be valued at 75% and the height at 275px.
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc(150% - 75%);
height: calc(350px - 75px);
background-color: lightgreen;
padding-top: 50px;
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: black;
}
h1 {
color: red;
}
h2{
color: green;
}
</style>
</head>
<body>
<center>
<div class = "jtp">
<div class = "jtp1"> Welcome to Hubtolearn Solutions Ltd </div>
<h1> Here is an example of the calc() function /h1>
<h2> width: calc(150% - 75%); </h2>
<h2> height: calc(350px - 75px); </h2>
</div>
</center>
</body>
</html>
We can express the height and width values directly in the example above. Although the expression in the example above uses the same units, it will be difficult to write the values directly if the units are different.
Example 2-Use Of Mixed Units
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc(40% + 10em);
height: calc(350px + 75px);
background-color: lightgreen;
padding-top: calc(10% - 10px);
padding-left: calc(10% + 10px);
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: black;
}
h1 {
color: red;
}
h2{
color: green;
}
</style>
</head>
<body>
<div class = "jtp">
<div class = "jtp1"> Welcome to TechStack Solutions Ltd </div>
<h1> Here is an example of the calc() function /h1>
<h2> width: calc(40% + 10em); </h2>
<h2> height: calc(350px + 75px); </h2>
<h2> padding-top: calc(10% - 10px); </h2>
<h2> padding-left: calc(10% + 10px); </h2>
</div>
</body>
</html>
The following example uses the nested calc() function.
Example 3- Nested Calc() Function
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc( calc(40em / 3) * 2);
height: calc(350px + 75px);
background-color: lightgreen;
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: black;
}
h1 {
color: red;
}
h2{
color: green;
}
</style>
</head>
<body>
<div class = "jtp">
<div class = "jtp1"> Welcome to TechStack Solutions Ltd </div>
<h1> Here is an example of a nested calc() function </h1>
<h2> width: calc( calc(40em / 3) * 2); </h2>
<h2> height: calc(350px + 75px); </h2>
</div>
</body>
</html>
CSS Clip
This CSS property describes an element's visible area. Usually, it's used when an image is more significant than the element it's contained in. It applies to elements that have absolute positioning (position: absolute;).
It enables us to specify a rectangle with four coordinates to clip a positioned element.
Values
Auto: This setting displays the element in its default state. There will be no clipping.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.auto {
position: absolute;
width: 400px;
height: 400px;
clip: auto;
}
</style>
</head>
<body>
<h2>clip: auto; property</h2>
<img src= "cssclip.png" class="auto">
</body>
</html>
Shape: It is used to clip an element's specified area. Its valid value is rect(top, right, bottom, left).
Example
<html>
<head>
<style type = "text/css">
div {
background: url(jtp.png);
clip: rect(0px, 150px, 250px, 0px);
border:3px solid red;
height:200px;
width: 250px;
position: absolute;
}
</style>
</head>
CSS Descendant Selector
The descendant elements of a specific element are matched using the CSS descendant selector. The term "descendant" denotes being nested anywhere in the DOM tree. The descendant is still referred to as a descendant regardless of whether it is a direct child or deeper than five levels down.
There is only one space used to denote the descendant combinator. It combines two selectors, the first representing an ancestor (a parent, a parent's parent, etc.) and the second representing descendants. If an ancestor element matches the first selector and the second selector matches it, it is chosen as the selected element. Using descendant combinators is a function of descendant selectors.
The example below helps us understand the CSS descendant selector because we see how the CSS descendant selector is used in practice.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: lightgreen;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> Here is the first sentence in the div. </p>
<p> Here is the second sentence in the div. </p>
<div>
Here is the second div in the first div
<p> Here is the sentence in the second div. It is also affected. </p>
</div>
</div>
<p> The fourth sentence. Since it is not in the div, it won't be impacted. </p>
</body>
</html>
