What is the reason for the lack of functionality with marginTop when using nth-of-type?

Why isn't the margin-top applied when using nth-of-type, but it works fine when passing the value 3?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .rc105 .rc105-subheader:nth-of-type(2) {
      margin-top: 32px;
    }
    
  </style>
</head>
<body>
<section class="rc105 rc105v0" >
  <div class="cwidth">
    <div class="rc105-subheader">
      <div class="rc105-ttl">
         Applications
      </div>
      <p class="desc"> together.
        <a href="#" class="link">Learn more </a></p>
    </div>


    <div class="rc105w1 rw-scrim-neutral-40bg">
    </div>

    <div class="rc105-subheader">
      <div class="rc105-ttl">
        Test
      </div>
      <p class="desc"> platform.
        <a href="#" class="link">Learn</a></p>
    </div>

    <div class="rc105w1 rw-scrim-neutral-40bg">
    </div>

  </div>
</section>
</body>
</html>

Answer №1

When using nth-of-type, it specifically targets the element type you specify, such as a div.

It's important to note that it doesn't refer to the nth occurrence of a class in the selector.

The reason why '3' works is because the class being targeted is the 3rd div within that particular node. Conversely, '2' does not work because the second div doesn't have that class; instead, it has a different class like rw-scrim-neutral-40bg.

In practice, nth-of-type is more commonly used with the element itself in the selector, for example: div:nth-of-type(#) or p.something:nth-of-type(#)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

Overriding the !important declaration in inline styles within various CSS IDs and classes

I need to find a way to override an inline !important declaration that is nested inside multiple CSS ids and classes. Let's analyze the following situation: <div class="A"> <div class="B"> <div class="C"> < ...

Add a date to my database using an HTML form

I am having trouble inserting a date into my database using PHP. Everything else inserts correctly, but the date reverts to the default 0000-00-00 as if nothing was entered. I have set the data type for the date field. Here is the code snippet: <?php ...

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

What is a reliable method for automatically refreshing a webpage despite encountering server errors?

I'm working on an HTML+JS web page that refreshes itself automatically every few seconds using http-equiv="refresh". The problem is, sometimes the server returns a 502 "bad gateway" error, preventing the HTML code from loading and causing th ...

Do LI elements need to be floated left for right alignment within a container?

I have a code where the LI elements are floated left and aligned to the left of the container. I want to change their alignment to the right using CSS. How can I achieve this? For example: [Item1..................................Item2] Below is the HTML ...

Scaling Images using HTML and CSS

Hey there, I'm currently learning web development and running into a bit of trouble with creating responsive images. Can anyone give me some guidance on what changes I should make in the code below? Here's the HTML code: <div class="caro ...

Issues with the HTML <div> tag placement in the center

I am encountering an issue while creating a basic HTML website. I want the image and white fields to fill the entire screen (100% width), but they seem to be constrained by some margin on both sides. As a beginner in web development, I believe the solution ...

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"

My navigation setup is as follows: <ul> <li><a href="index.html#open-site">Test</a></li> <li><a href="#open-site">Test</a></li> <li><a href="test.html#open-site"> ...

Is it possible for me to scrape an HTML code snippet directly from a browser?

How can I extract specific content from an HTML code block using only JS or jQuery on a browser? Below is the code I am working with: <ul> <li>New York</li> <li>London</li> <li>Madrid</li> <li&g ...

Inserting data into a Textbox by clicking on a Div

I'm currently working on creating a wallpaper changer for my website. Right now, I'm looking to input the URL of a wallpaper into a text box when the corresponding DIV option in a CSS menu is clicked. Below is the JQuery I am using: $("div.bg8 ...

Parcel JS: The function tree.render is missing or not defined

Every time I attempt to execute the production build command npm run build or npx parcel build index.html, this error occurs. My project consists of simple HTML and CSS, without any React or third-party libraries. What could be causing this issue? I have t ...

The backend is serving HTML content, but the frontend is not initiating any redirects

After hitting an API endpoint and examining the network call responses, I identified that the HTML response returned with a status code of 302. Despite this, I am perplexed as I do not witness the expected redirect on the user interface. The intended redir ...

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

How to Use Multiple Arrays in jQuery to Find ChildNodes Based on Class Attribute in HTML?

I manage my weekly schedule manually through a static table. <table> <tr class="live al tv"> <td>October 2</td> <td>12:30 pm</td> <td class="competition"></td> <td>Team A v Team B< ...

Use Jquery to swap out text without the need for a separate update button

Looking to replace "Gastos de envío: " with "Shipping costs" on the English page. I currently have this jQuery code (which is working), but it only replaces the text the first time you visit the page. If you update the shipping costs, the jquery does not ...

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

I'm trying to figure out how to call another script from an HTML page that is being served by my node project's localhost server. Here's the basic setup: index.js var http = require('http'); var fileSystem = require('fs' ...

What is the best way to use Jsoup to choose multiple HTML elements that are on the same level in the tree structure?

I encountered an issue while working on a project that involves scraping data from a website containing the following HTML code: <div class="lin-curso" style="border: 0;"> <div class="lin-area-c3"> Vagas 2017 </div> </ ...

Displaying dates on the Amcharts category axis for instances with empty data

I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "hideCredits": true, "fixedColumnWidth": '10px& ...

When the first Div is clicked, can it move to the end of the list?

I have designed a collapsible tab and I would like to make some modifications. I want it so that when the user clicks on the first tab, it will move to the last position in the collapsible list, and the same should happen for the other tabs as well. For ex ...