The issue with `nth-of-type` not properly functioning within a list

I am having trouble altering the background of my divs when they are contained within an li element. It seems that the problem may be related to the arrangement of my elements.

<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

.featured-items li .inner:nth-of-type(1) {
    background-image: url(../images/phone.jpg);
}

.featured-items li .inner:nth-of-type(2) {
    background-image: url(../images/firelace.jpg);
}

Currently, each inner element displays "phone.jpg".

htmlcsscss-selectors

Answer №1

To achieve the desired result, utilize the following CSS selector: 

.featured-items li:nth-of-type(2)>div.inner

.featured-items li:nth-of-type(1)>div.inner  {
    background-color: red;
}

.featured-items li:nth-of-type(2)>div.inner {
    background-color: yellow;
}
<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div>v</div></li>
        <li><div class="inner"><div class="item-content"></div>f</div></li>
        <li><div class="inner"><div class="item-content"></div>vl</div></li>
</ul>

Answer №2

To style the .inner by selecting the li element, use the following approach: "target the (n)th list item and apply the specified styles to its .inner child."

.featured-items li:nth-of-type(1) .inner {
    background-image: url(../images/phone.jpg);
}

.featured-items li:nth-of-type(2) .inner {
    background-image: url(../images/firelace.jpg);
}
<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

Answer №3

Give it a shot:

li {
border:1px solid red;
}
.featured-items li:nth-of-type(1) > .inner{
    background-image:url(http://images.clipartpanda.com/flower-clip-art-4c9arqMcE.png);
    background-size:20px 20px;
}

.featured-items li:nth-of-type(2) > .inner {
    background-image:url(http://www.clker.com/cliparts/d/E/X/A/4/f/pink-daisy-md.png);
 background-size:20px 20px;
}
<ul class="featured-items">
   <li>
      <div class="inner"><div class="item-content">1</div></div>
  </li>
 <li>
      <div class="inner"><div class="item-content">2</div></div>
  </li>
  <li>
    <div class="inner"><div class="item-content">3</div></div>
  </li>
</ul>

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

Is there a way to maintain the selected position on the drop-down menu for users?

Whenever I choose an option from the drop-down field in my form, it automatically jumps back to the top of the page. Just to clarify, I have a drop-down menu at the top of the page and several input fields below. Users need to scroll down to reach the dro ...

javascripthtmldrop-down-menu

Using jQuery to add an element at the current caret position

Within my contentEditable div, there is a table nested. Here is an example of the HTML structure: <div id="divId" contenteditable="true"> <table> <tbody> <tr> <td><br></td> ...

javascriptjqueryhtml

Adjust for the region shifted using transform: translate

I'm currently working on adjusting the positioning of elements using transform: translateY in CSS. The challenge I am facing is eliminating the empty space that appears between elements after repositioning one element below another without altering th ...

htmlcsscss-transforms

How can JSON data objects be transmitted to the HTML side?

I created a JSON object using Node JS functions, and now I'm looking to transfer this data to the HTML side in order to generate a table with it. However, I'm encountering difficulties sending the JSON object over because of my limited experience ...

javascripthtmlnode.jsexpress

Reset the queue for the slideDown animation using jQuery

I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expect ...

jqueryhtmlcssanimation

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

htmlcssflexboxalignment

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Using jQuery to dynamically select all rows (`tr`) that contain table data cells (`td`) matching

Although my title may seem confusing, it's the best I could come up with. I'm looking to identify all tr elements that contain td elements matching specific filter criteria. Here is an example: <tr class="row" id="1"> <td class="ph ...

javascriptjqueryhtml

Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

I've been facing a challenge with making my web page resizable. Even though I managed to center the elements using margin properties, whenever I try resizing the browser window, the logo and ship images lose their positions. They end up falling out of ...

cssbootstrap-4resize

Maintain the aspect ratio of an image when placing it in a square container

Looking for a way to create a CSS grid with non-square random sized images? I need help filling all the space inside a fixed size div. Any suggestions? Check out my example: (blue represents the fixed size div and red shows the image inside it) ...

javascriptjqueryhtmlcss

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

javascriptpythonhtmlcss

Transmitting HTML through a Java socket connection

I am facing an issue where I am attempting to send the code from 'index.html' using Java socket wrapped in BufferedWriter. However, when I try to connect to 'localhost:port' in a browser, I encounter different results: text output (&l ...

javahtmlsocketsoutput

How can I automatically scroll to an anchor element once CSS animation has finished

I am currently working on a CSS animation that looks like this: @-webkit-keyframes flip { 0% {opacity:1;} 100% {opacity: 0;} //This could be 90% //And here could be frame for 100% which would scroll it down. } #headercover { -webkit-animation-name ...

javascriptjqueryhtmlcss

The appearance of the page varies between Ubuntu and Windows 7 when viewed on Firefox 31

This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct): compared to Windows 7 (wrong): I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate w ...

htmlcss

I am having trouble debugging the Twitter Bootstrap v4-alpha grid. The col-sm-offset-* class doesn't seem to be

Something has been altered somewhere, causing col-sm-offset-*s to stop functioning entirely. For instance, when attempting to split the screen in half and only display content on the right side, I typically would use: <div class="container"> < ...

csstwitter-bootstraptwitter-bootstrap-4

Troubleshooting problem with iPhone X responsiveness

Struggling with responsive issues on iPhone X. Issue is only appearing on actual device. Any tips for fixing this? I'm facing an issue where the website looks good and responsive on all devices in Chrome's responsive view. But when I access it th ...

javascripthtmlcssangularbootstrap-4

"Customizing the color of the arrow in Bootstrap tooltips

Trying to customize tooltips in twitter-bootstrap, I set the template option of the tooltip with inline styles to achieve red tooltips instead of the default black color: $(document).ready(function(){ options = { container: 'body&ap ...

csstwitter-bootstrap

Create a custom loading spinner for a jQuery AJAX request

How can I add a loading indicator to my Bootstrap modal that is launched from a link? Currently, there is a 3-second delay while the AJAX query fetches data from the database. Does Twitter Bootstrap have built-in functionality for this? UPDATE: Modified J ...

javascriptjqueryhtmlajax

AngularJS causing issues with Materializecss dropdown menu operation

I'm currently working on a web application using Materializecss and AngularJS for the front-end. However, I've encountered an issue with the dropdown menu component of Materialize not functioning as expected. Here's an example of the dropdo ...

javascripthtmlcssangularjsmaterialize