Distinguish a specific div within a group of divs by styling it uniquely using just CSS and HTML

I need assistance in selecting the first div with both "con" and "car" classes among all the divs using a CSS selector.

<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

The "con" and "car" divs can appear in any order within the parent container. Although it is currently the third child, I want to target and style the first div with both "con" and "car" classes even if its position changes. How can I achieve this?

htmlcss

Answer №1

To solve this issue, one approach is to target the classes that should not be styled using the subsequent-sibling combinator ~

.con.car ~ .con.car {
  background: none;
}

.con.car {
  background: red;
}
<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

Alternatively, a more efficient solution can be achieved with JavaScript.

document.getElementsByClassName("con car")[0].style.background = "red";
<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

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

Font Awesome icons may not display in HTML

Hey there, I'm struggling to get checkbox icons and a plus symbol to appear on my checkbox tags on my website. I added this CSS code to the main .css file of the page, but unfortunately the icons are not displaying. Here is the CSS snippet that includ ...

htmlcssfont-awesome

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

javascriptcssdom-eventsbootstrap-5

Basic Jquery CSS style requests

Can you help me troubleshoot this issue? var hover = $('<img />').attr('src', hovers[i]).css('position', 'absolute') I'm having trouble getting th ...

jquerycss

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

javascriptjqueryhtmlcssjqgrid

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

javascripthtmlangular

Ways to customize the default home icon

My current theme is Redmond, but I would like to change the color of the home icon in the breadcrumb. To achieve this, I have included the hot-sneaks theme in the pom.xml file: <dependency> <groupId>org.primefaces.themes</groupId&g ...

cssjsfprimefaces

Creating a mouse hover effect for irregular shapes on an image map

Is it possible to implement a mouse hover effect on irregular shapes within an image map? These irregular shapes are not basic polygons like rectangles, triangles, or circles, but rather complex designs such as lanterns or animals. Can this be achieved? ...

htmlcss

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

Creating a customized Paypal form with user-selected options

I want to make it easy for visitors to my website to pay through Paypal by simply clicking on a link that will take them directly to the checkout page. What I'm looking for is a way to provide basic options such as: Allowing users to enter their na ...

htmlcsspaypal

Expanding a website banner slide to fill the entire width of the page

Is there a way to ensure that the banner images in the website below flow seamlessly? Currently, it seems like the current image is cut off on the left and part of the previous image shows up in its place. I'd like the current image to occupy the ent ...

javascripthtmlcssajaxtemplates

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...

javascriptphphtmlmysql

Utilizing UIWebView for dynamic HTML templating

Greetings! I am seeking to develop an HTML template (either internal or external) for the data received from an XML request. The following code has been functioning smoothly thus far: NSString* desc = [screenData.jsonVars objectForKey:@"descriptionTXT ...

iphonehtmliosuiwebview

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

Guide to bringing API information into a Material UI Card

I've been working on a Recipe app that leverages data from the edamame API. I successfully imported Material UI cards into my .js file to pull data from the API and stored it in a const named recipes. However, I'm facing difficulties in getting t ...

htmlcssreactjsmaterial-uiedamam-api

Issue with toggling JS checkboxes selection

Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...

javascripthtmlforms

Retrieve detailed Paypal donation transaction information in HTML format with the donation button functionality integrated

I'm currently in the process of building a web application for a non-profit organization, which includes a Paypal Donation feature. I am using HTML5, CSS3, and jQuery to develop this application. I have successfully implemented the Donation button fro ...

jqueryhtmlcsspaypaltransactions

Tips for centering a <div> vertically within another <div> ?

I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far: .itemInfo { display: table; width: 100%; } .itemTotal { display: table-cel ...

htmlcssbootstrap-4

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

javascriptjqueryhtmlcsssvg

What could be causing the issue with this jQuery selector for the parent form element?

I created a form that connects a button with an attribute, but it's not hiding the parent("form"). However, when I try this, it works. $($("[editFormContent]").attr("editFormContent")).click(function(e) { e.preventDe ...

javascripthtmljqueryparent