For this exercise, I was provided with the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selected text</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<h1>Pseudo-elements</h1>
<p class="my_paragraph">The Almighty CSS allows you to not only work with
elements declared in your HTML code but to also customize those parts of
the page you can not address using simple selectors. This might be the
customization of the first line of the paragraph, the first letter of the
paragraph, or even the part of the text user has just selected.</p>
<p>Here is the list of the most-used pseudo-elements:</p>
<ul class="my_list">
<li>::first-line</li>
<li>::first-letter</li>
<li>::placeholder</li>
<li>::marker</li>
<li>::before</li>
<li>::after</li>
<li>::selection</li>
</ul>
</div>
</div>
</body>
</html>
The goal is to 'Change the color of the text inside .my_paragraph to white and give it a black background when it is selected.'
Below is the given CSS code for reference:
/* Your solution goes here */
.my_paragraph::first-line {
background: linear-gradient(90deg, #9d3ce9, #5fbf85);
color:white;
}
.my_list li::marker {
color:#9d3ce9;
}
.container {
align-items:center;
display:flex;
height:100vh;
justify-content:center;
width:100vw;
}
.container_inside {
align-items:center;
display:flex;
flex-direction:column;
height:80%;
justify-content:center;
text-align:center;
width:60%;
}
.my_list {
text-align:left;
}
To address the task, I included the following snippet in the CSS section:
.my_paragraph::selection {
color:white;
background-color:black;
}
If there are any issues or corrections needed, please let me know.
Thank you in advance.