Hello, I'm having trouble adding different colors to the span element using a pseudo-class. Can anyone provide some guidance on how to achieve this?
<ol class="hidden-xs">
<li class="active dt-nav"><span class="dot-nav">1</span></li>
<li class="dt-nav"><span class="dot-nav">2</span></li>
<li class="dt-nav"><span class="dot-nav">3</span></li>
<li class="dt-nav"><span class="dot-nav">4</span></li>
</ol>
.dt-nav:nth-child(1) {
color:red;
}
.dt-nav:nth-child(2) {
color:blue;
}
.dt-nav:nth-child(3) {
color:green;
}
.dt-nav:nth-child(4) {
color:orange;
}
implement :nth-child() selector
li span:nth-child(1) {
color: green;
}
li span:nth-child(2) {
color: red;
}
li span:nth-child(3) {
color: blue;
}
continue this pattern
To style your CSS elements correctly, it is important to choose the right li children. Take a look at this example:
ol.hidden-xs > li:first-child > span.dot-nav {
color: #000000;
}
ol.hidden-xs > li:nth-child(2) > span.dot-nav {
color: #333333;
}
ol.hidden-xs > li:nth-child(3) > span.dot-nav {
color: #db0036;
}
ol.hidden-xs > li:last-child > span.dot-nav {
color: #cccccc;
}
To resolve your issue with the styling, you need to correct your CSS and utilize appropriate selectors:
ol > li.dt-nav:nth-child(1) > .dot-nav {
background: blue;
}
ol > li.dt-nav:nth-child(2) > .dot-nav {
background: green;
}
ol > li.dt-nav:nth-child(3) > .dot-nav {
background: yellow;
}
ol > li.dt-nav:nth-child(4) > .dot-nav {
background: pink;
}<ol class="visible-xs">
<li class="active dt-nav"><span class="dot-nav">A</span></li>
<li class="dt-nav"><span class="dot-nav">B</span></li>
<li class="dt-nav"><span class="dot-nav">C</span></li>
<li class="dt-nav"><span class="dot-nav">D</span></li>
</ol>Furthermore, ensure that your HTML is properly structured (</em>).
If you want to style each li item differently, you can use the "nth-of-type" selector like so:
li:nth-of-type(1) span { color: red; }
li:nth-of-type(2) span { color: white; }
li:nth-of-type(3) span { color: blue; }
li:nth-of-type(4) span { color: rebeccapurple; }
Utilize Sass to enhance your CSS abilities:
$colors: orange, blue, red, green;
li {
@for $i from 1 to 5 {
&:nth-child(#{$i}) {
span {
$color: nth($colors, $i);
color: $color;
}
}
}
}
On my website, I have created a contact us form using HTML, Bootstrap, and PHP. The form functions correctly, and messages are successfully received. However, the issue is that upon clicking the submit button, a new page opens up displaying a "Thank you me ...
Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...
I designed a single-page layout with multiple sections and added links to the navigation bar for easy access. I also incorporated jQuery for smooth scrolling within the page. However, when I tried linking to other pages, it didn't work properly until ...
I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...
I find myself in a scenario where I must dynamically inject CSS into a webpage. The content of this page is constantly changing, and I am provided with raw HTML and a link to a CSS file from a server that needs to be displayed on the page. My attempt to ...
Recently, I created code in php for uploading an image/file using move_upload_file() as shown below: if (isset($_POST["title"]) && isset($_POST["content"]) && isset($_POST["category"])) { //if (!isset($_POST[])) $title = ...
I am receiving an array of data from the backend and looking for a way to display them in a vertical list using HTML. Can anyone help me with this? Below is my current code snippet. TS: this.sub = this.route.params.subscribe(params => { this.http.g ...
When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...
Within my code, I have created a div element which serves as a popup message: <div class="info message"> <h3>Informação</h3> <p>Mensagem informativa.</p> </div> In addition, ther ...
I have a side navigation bar on my webpage that I obtained from a React Bootstrap website, so the class names are already pre-loaded. Instead of using a toggle hamburger icon to expand or collapse the navigation, I want to achieve this functionality based ...
I am struggling to understand why Safari is adding a white space at the bottom of the image on my current website project. Interestingly, Firefox and Chrome display it correctly. The image should stay fixed at the bottom of the page even when resized. He ...
Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...
Currently, I am in the process of developing a website using Visual Studio and attempting to connect it to a Microsoft SQL Server 2014 database. My learning journey has led me to a tutorial video on YouTube focusing on creating a coffee-themed website alon ...
I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...
In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...
After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...
After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...
Could someone please assist me with changing the size of post pagination that includes the code --nextpage--? I've attempted the following code: .td-post-content .page-nav a { font-size: 16px; } Unfortunately, it isn't working as expected. App ...
I am currently working on a project in Vue 3 that involves an image map with click events on certain areas. The challenge I'm facing is that the images scale according to the browser size, but the coordinates of the image map are fixed pixel sizes. I& ...
I have tried numerous solutions for my issue, but none seem to work. When testing in JSFiddle, the code works perfectly due to automatic onload support. However, when I open the same HTML file locally in Chrome/IE/FireFox, the layout is correct but the J ...