CSS Text-Decoration and CSS NTH-Child(N) Selector
CSS Text-Decoration
The CSS text-decoration is a CSS property that decorates the content of a text. It inserts lines either under, above, or through the text and specifies the look of the decorative lines on the text. It decorates the text with several kinds of lines. This is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.
Below, we discuss the property values along with examples of each.
Text-decoration-line
This specifies the type of line text-decoration like overline, underline, or line-through. It can also add a combination of lines to the selected text.
Example
The values underline, overline, and line-through will be used in this example. Also, you will see how these values are used simultaneously.
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
<style>
h1 {
color: green;
}
h2{
color: black;
}
body {
text-align: center;
}
p{
font-size: 30px;
}
#p1 {
text-decoration: underline;
}
#p2 {
text-decoration: line-through;
}
#p3 {
text-decoration: overline;
}
#p4 {
text-decoration: overline underline line-through;
}
</style>
</head>
Text-decoration-style
This specifies the sort of line. It can be solid, dotted, wavy, double, or dashed.
The following example enables us to understand the text-decoration-style further.
Example
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
<style>
h1 {
color: green;
}
h2{
color: black;
}
body {
text-align: center;
}
p{
font-size: 30px;
}
#p1 {
text-decoration: underline double;
}
#p2 {
text-decoration: line-through dashed;
}
#p3 {
text-decoration: dotted overline;
}
#p4 {
text-decoration: lightblue wavy overline underline line-through;
color:red;
}
</style>
</head>
Text-decoration-color
This provides color to the text decoration. You can use any color you like, provided the format is valid.
Example
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
<style>
h1 {
color: green;
}
h2{
color: black;
}
body {
text-align: center;
}
p{
font-size: 30px;
}
#p1 {
text-decoration: underline double violet;
}
#p2 {
text-decoration: line-through dashed pink;
}
#p3 {
text-decoration: dotted overline red;
}
#p4 {
text-decoration: lightgreen wavy overline underline line-through;
color:black;
}
</style>
</head>
<body>
<h1>Welcome to the Techstack revolution</h1>
<h2>text-decoration: text-decoration-line text-decoration-style;</h2>
<div>
<p id="p1">This is a double underline</p>
<p id="p2">This is a dashed line-through</p>
<p id="p3">This is a dotted overline</p>
<p id="p4">This is a wavy combination of all lines</p>
</div>
</body>
</html>
CSS NTH-Child(n) Selector
Using the nth-child selector, elements are matched based on their positions regardless of their parent type. The n can be a keyword, a formula, or a number, and it is used to match elements according to their position within a group of siblings. The nth-child element matches each element.
The "n" in the parentheses is the discussion that describes the pattern for the matching of elements. It can be a functional, an even, or an odd notation.
The odd values describe the elements whose position is odd in series like 1, 3, 5, etc. Likewise, the even values represent the elements whose position is even in series like 2, 4, 6, etc.
The functional notation describes elements whose siblings' positions match the An+B pattern, where A represents the integer step size, n refers to any positive integer starting from 0, and B refers to the integer offset, determining which keys to which elements match the dataset.
Below are some examples to aid our understanding and how you can add to HTML.
Example1
In this example, we will use the functional notation 3n+4 that will represent the elements:
(3×0)+4 = 4, (3×1)+4 =7, and many more.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
p:nth-child(3n+4) {
background: blue;
color: black;
font-size:30px;
}
</style>
</head>
<body style = "text-align:center">
<h1>
Hello Everyone
</h1>
<h2>
Welcome to the Techstack revolution
</h2>
<p>This will not be affected.</p>
<p>This will be affected.</p>
<p>This is not affected.</p>
<p>This is not affected.</p>
<p>This will be affected.</p>
</body>
</html>
Example2
In this example, we will use the odd and even keywords that match elements whose index is odd or even. Do note that the first child index is 1.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child Selector</title>
<style>
p:nth-child(even) {
background: blue;
color: black;
font-size:30px;
}
p:nth-child(odd) {
background: red;
color: white;
font-size:20px;
</style>
</head>
<body style = "text-align:center">
<h1>
Hello Everyone
</h1>
<h2>
Welcome to the Techstack revolution
</h2>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
</body>
</html>
