Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below?
hr:nth-of-type(n+1):nth-of-type(-n+3){
background:red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr />
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<hr />
<hr />
<hr />
<p>The fourth paragraph.</p>
</body>
</html>If you're looking to add a border, consider using the border property:
border:1px solid red;
hr:nth-of-type(n+1):nth-of-type(-n+3){
border:1px solid red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr />
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<hr />
<hr />
<hr />
<p>The fourth paragraph.</p>
</body>
</html>Make sure to define the border property, not background, and set the HR element as constants rather than formulas because they are supposed to be used for selecting items using other methods.
hr:nth-of-type(1), hr:nth-of-type(3){
border:1px red solid;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<hr>
<hr>
<hr>
<p>The fourth paragraph.</p>
</body>
</html>Source: https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type
Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...
On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...
As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...
I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked. I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clic ...
Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...
Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...
<div style = "height:auto;width:auto; background-color:#5C81F4;display:flex; justify-content:center;"> <div style="display:flex;flex-direction:column; width:90vw;height:auto;overflow:hidden;border-radius:20px; background-color:# ...
I need help with disabling select options based on specific time instances. For example, I want the user to provide specifications by 6:00 am in order to use the system at 10:00 am, ensuring there is a 4-hour gap between the two times. So, after 6:00 am, t ...
I need to extract specific nodes from a large HTML page by using Xpath: <html> ........ <!-- begin content --> <div>some text</div> <div><p>Some more elements</p></div> <!-- end content --> ....... ...
I'm currently working with bootstrap and have implemented a table with the property "table" to create a light background for the data pulled from a database. The design looks great, except for when I try to insert a button in each row for editing purp ...
I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...
I have extracted raw HTML content stored in the database and I am attempting to display it within a div element. const style = { border: '2px solid #eee', height: '270px', width: '100%', overflow: 'auto&ap ...
I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...
https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...
Take a look at my file upload form below: <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> </form> I am trying to figure out ...
I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...
My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...
Seeking assistance in fetching real-time data using a jQuery Ajax Post method. My experience lies mainly in SQL and C#, so coding in this language is relatively new to me. I was advised to use this script, which seemed straightforward. However, despite my ...
Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...
Currently, I am in the process of developing my own lightweight blogging platform as a way to enhance my skills in PHP and jQuery without depending on Wordpress. The pagination system I have created displays 5 blog posts per page using PHP. However, within ...