Tips for accessing CSS properties on the img tag

I could use some assistance with CSS. I am in the process of creating a tree structure using many <ul> and <li> tags. The issue arises when I have multiple <li> elements with a specific class, each containing an <img> tag.

How can I target these <img> tags within the <li> elements based on their classes and assign different background images to them? I am unsure of how to correctly reference the <img> tag associated with a particular <li> class and then apply a background image.

Please note that the use of CSS3 is not permitted.

<ul>
  <li class="leaf"><img></li>
  <li class="leafhidden"><img></li>
</ul>
javascripthtmlcss

Answer №1

To distinguish the <img> elements, you can use the following CSS:

li.tree > img {
    background: url("/images/tree_bg.png");
} 
li.leaves > img {
    background: url("/images/leaves_bg.png");
}

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

What methods can I use to insert an array of objects into a Query?

I'm currently trying to understand how I can pass an array of objects into my GraphQL query. The documentation seems a bit confusing on this matter. In my project, I am using Apollo on the frontend, Graphql-yoga on the backend, and Prisma as my databa ...

javascriptreactjsgraphqlapollo

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition

Unique WordPress Loop Design (Grid/Row)

Looking for a custom Wordpress post loop that will display posts in a specific format. The desired layout includes two posts in each "col" div, both contained within a "row" div: <div class="row cols2"> <div class="col left"> <a href="#"> ...

phphtmlwordpress

I am not familiar with this HTML element, it's a mystery to me

As I develop a data-recollection view in HTML, I've recognized the necessity of creating something similar to this: To elaborate, it's an image created hastily, with an input where users can enter data. When they click the "+" button, another in ...

javascripthtml

assisting with the transition effect using CSS3, JS, or jQuery

I am looking to alter the background-image of this particular image when transitioning to another one from my images folder, similar to this example. Below is the code that I have: CSS .image { position: relative; overflow: hidden; -webkit-tr ...

javascriptjqueryhtmlcss

Struggling to construct a binary tree as my descendants are not arranged in the right sequence

I am currently working on building a binary tree using PHP, MySQL, and a jQuery plugin developed by Frank-Mich. Here is the progress I have made so far... DATABASE STRUCTURE CREATE TABLE IF NOT EXISTS `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...

javascriptphpjquerymysqlpdo

The jQuery ajax function seems to be malfunctioning when attempting to send a post request

Having trouble with AJAX? Let me show you my approach to making a POST request to my RESTful service using AJAX: var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); //xmlhttp.open("GET","http://192.168.1.100:8080/MapDemo/serv ...

javascriptjqueryajax

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...

javascriptjquerycss

What is the process of including a pre-existing product as nested attributes in Rails invoices?

I've been researching nested attributes in Rails, and I came across a gem called cocoon that seems to meet my needs for distributing forms with nested attributes. It provides all the necessary implementation so far. However, I want to explore adding e ...

javascriptruby-on-railsrubypostgresqlnested-attributes

There will be no pop-up notification displayed if the product is already in the cart

When a product is added to the cart, the following code is used: addproduct(itemId) { this.showLoading = true this.$http.post('/shampoo', {'item': itemId}).then((response) => { swal({ title: "Success!", ...

javascriptphpjsonlaravel

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

Excessive content in Bootstrap row extends outside browser window dimensions

I'm having an issue with the Bootsrtap row overflowing past the desired width, causing a scrollable area on the browser. Does anyone know how to fix this? You can see the site here: www.testing.cpukeychains.comhttps://i.sstatic.net/cDcot.png ...

htmlbootstrap-4row

What is the function of the 'this' keyword within a Vue component?

Can someone explain how the keyword 'this' is able to access tasks that are not within the same object? anyobject = { template: '#task-list', props: { tasks: {default: []} }, data() { return { newTask: '&apos ...

javascriptvue.jsobject

Having issues with AJAX and .change() function not functioning correctly?

I am working on two drop-down menus. The first menu displays the provinces in the country, and when a province is selected, the second menu should show the districts within that province. The following code is for displaying the provinces: $(document).re ...

javascriptjqueryajax

Retrieving AJAX content once it has finished loading

Apologies for my poor English. I have a function to handle ajax requests like this: $(document).on("click", ".ajax", function(e){ //dynamic content here, getting the href value from links. }); Now I need to manipulate the content of the ajax response AF ...

javascriptjqueryajaxforms

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

javascriptjqueryhtmlmodule-pattern

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

javascripthtmlreactjs

Checking the URL in Redux Form

I am currently using the redux-form library to manage my form in React Redux. I have successfully implemented validation for fields like email and name. However, I am facing an issue with validating a URL field in redux-form. What specific format should I ...

javascriptformsreactjsreduxredux-form

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

Need some help with a Bootstrap modal form that is not submitting via AJAX as intended. When the form is submitted, the entire page reloads instead of having the data posted in the background. How can I fix this while keeping the page state? Below is the c ...

javascriptjqueryajaxhtmltwitter-bootstrap-3

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss