Element placed between two classes selected with CSS syntax

Curious about which jQuery selector to use for selecting elements with the class "bar" only if they are located under a button element (with no class) that is, in turn, placed within a div with the class "foo"

<div class="foo">
  <button>
    <i class="bar">X</i>
 ...

The selector ".foo button.bar" is not effective

UPDATE: Appreciate all the suggestions, tried them out but noticed that other elements were also being selected:

<div id="mceu_36" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_36" role="button" aria-label="Align left">
  <button role="presentation" type="button" tabindex="-1">
    <i class="mce-ico mce-i-dashicon dashicons-align-left"></i>
  </button>
</div>
...
<div id="mceu_40" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_40" role="button" aria-label="Edit ">
  <button role="presentation" type="button" tabindex="-1">
    <i class="mce-ico mce-i-dashicon dashicons-edit"></i>
  </button>
</div>

I'm aiming to handle clicks on <i> elements with the class dashicons-edit only if they are nested under a div with the class mce-first. In the example above, "mce-first" is present in a sibling div.

jquerycss

Answer №1

To meet your specific requirements:

  • choosing <i> with the classification "bar"
  • ONLY when it is positioned under a button element (without any class)
  • this button must be nested within a div carrying the class "foo"

The appropriate selector for this scenario would be

div.foo > button:not([class]) > i.bar

In the syntax of selectors, a space signifies any subsequent level in the DOM structure. The > symbol denotes a direct child.

If you do not require a direct-child selection, simply use spaces instead

div.foo button:not([class]) i.bar

If you are mainly focusing on elements related to the <button> and are indifferent towards their classes, utilize

.foo button .bar

Your original selector, .foo button.bar, was seeking a <button> labeled with class bar that was situated at any level below an element tagged with class foo.

Answer №2

The selector ".foo button.bar" is not functioning properly

button.bar refers to a button element with the class of "bar"

This is how the HTML appears:

<div class="foo">
  <button class="bar">
    <i class="bar">X</i>

Correct format: .foo button .bar

Answer №3

One way to determine if there are multiple target elements within the foo container is by utilizing the find method.

$('.foo').find('button .bar');

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

Autoselecting Dropdown Field on Wordpress Contact Form 7 Depending on Referral URL

I have been referencing the following two answers: Wordpress Contact Form 7 dynamically select dropdown field based on url Auto-select fields in Contact form 7 based on referral link The code snippet below is currently inserted in the CSS block on the / ...

javascriptjquerywordpresscontact-form-7

Tips for Optimizing Video Content for Mobile Devices

Upon reviewing the first image, it is evident that the video is displaying correctly: https://i.sstatic.net/EbQyM.png However, in the mobile version, the poster does not show up. Only a play button is visible. Moreover, even when the play button is click ...

htmlcssvideomobile

Customize Highcharts axis properties after adding additional series to the plot

When working with highcharts, I utilize the xAxys and yAxis properties to format the inserted data. The code used is the same for both axes, so I'll provide an example for one of them: $('#containers').highcharts({ .... .... yAxis: { ...

javascriptjqueryhighcharts

Issue with Bootstrap 4: Dropdown menu extends beyond the edge of the screen towards the right side

I'm having trouble with the dropdown items extending off the page. I've tried a few solutions from BS3 but they don't seem to be working for me. I suspect it might have something to do with the ml-auto class. (please disregard the if-else st ...

twitter-bootstrapcssbootstrap-4

Sending information and HTML content from PHP to JavaScript using JSON

As a beginner to this, I acknowledge any noticeable mistakes. I am attempting to utilize an ajax call from Javascript to randomly select a movie from a database, generate some html containing information about the movie, and also return an array of inform ...

javascriptphpjqueryajaxjson

What is the method for accessing a JQuery mapping array in PHP?

I am attempting to transfer data from JQuery to PHP and then save it in the database. Here is my JQuery code snippet: var map = $.map(customFieldIds, function(value) { return { name: value, value: customFieldValues[value] ...

phpjqueryarraysajaxmapping

Handling large file uploads with Ajax in MVC 4.0 when Request.Files is empty

I attempted to incorporate a basic file upload feature with ajax and progress bar into my mvc 4.0 controller using VS2013 and .net Framework 4.5. Uploads under 4MB function correctly, but when attempting to upload files larger than 4MB, the Controller met ...

c#jqueryasp.netajaxasp.net-mvc-4

Searching for hyperlinks with Datatables feature

In my current project, I have implemented a dataTable and everything is running smoothly except for one specific issue. During searches, the dataTable is also including text within href attributes of anchor tags, which is not desired in this case. http:/ ...

jquerydatatables

Exploring a JSON object generated from an MVC view model

In my controller, I am successfully passing my Model to the view using the following code: Models.Models.AELeadInfo lead = new Models.Models.AELeadInfo(); lead.firstName = "name"; lead.lastName = "lastname"; lead.add1 = "add1"; lead.add2 = "add2"; lead.ci ...

jqueryajaxjsonasp.net-mvc

Steps for submitting multiple variables using AJAX

After extensive research, I am still struggling to figure out how to accomplish this task. I have a few variables that need to be posted, but I am unsure of the correct method to do so. When I try to post only one of them, it works fine and gets stored in ...

phpjqueryajax

Use .empty() method to remove all contents from the tbody element after creating a table

Currently, I am working on a project where I am creating a drop-down list to assist users in selecting media and ink for their printers. The goal is to then generate a table displaying the selected results. While I have managed to successfully generate the ...

javascriptjqueryhtmljspdf

Height set at 100% but not extending to the entire parent element

I've applied min-height: 100vh; to the body, and then height: 100% to the main element. However, the height of the main does not extend fully to its parent container. Could someone please help me understand why this is happening? Thank you. I'v ...

css

Learn how to send back a modified view using ajax in asp.net mvc

I am encountering an issue with ajax. Here is the code. Model public class ViewModel { public long requestedVar { get; set; } public string ReturnedDescription { get; set; } } View Name: AddNewInfo <head> <script> $.datep ...

jqueryasp.netajaxasp.net-mvcmodel-view-controller

Bootstrap3 Remote Modal experiencing conflict due to Javascript

Utilizing a bootstrap modal to showcase various tasks with different content but the same format is my current goal. However, I am encountering an issue when attempting to make the textareas editable using JavaScript. The conflict arises when I open and cl ...

javascriptphpjquerymodal-dialogbootstrap-modal

Ways to vertically center an absolutely positioned element

In the code snippet below, there is a .square-container that is absolutely positioned and contains a square. The goal is to vertically center the .square-container within its parent div. .container { position: relative; background-color: blue; } ...

htmlcss

What are some best practices for ensuring that a mobile app's confirmation dialog remains open even when a user clicks outside of it

Could you provide instructions on how to use the code snippet below since we do not have a dialog box available: var message = text; var title = "INFO"; var buttonLabels = "OK"; navigator.notification.confirm(message, null, title, buttonLabels); Can some ...

javascriptandroidjquery

What seems to be the issue with this code in jQuery?

In my code, I am setting up two dropdowns with a script that fetches data based on the selected value from the first dropdown: <select class="cityId form-control" dir="rtl"> @foreach (var city in Paristan.AgencyPortal.UI.Areas.Cpanel.Components.Drop ...

jquery

Having trouble loading CSS in Firefox?

After creating a basic responsive website, I encountered an issue where Mozilla was not loading the CSS properly when the site was hosted on my server. Interestingly, the CSS loaded fine on Chrome and IE when viewed from my computer. Here is a snippet of ...

htmlcssbrowserencodingweb

Explore how Vue 2.1 allows for the dynamic updating of dropdown options based on selections made in another dropdown

Currently, I have a Vue v.2 form set up with an address section that includes a State dropdown. My goal is to make the State dropdown automatically populate based on the city selected. For example, if a user chooses 'Atlanta' as the city, 'G ...

javascriptjqueryvue.js

Can the custom scrollbar CSS property of a DOM node be located using JavaScript?

Is it possible to find a CSS property of a pseudo-class (like scrollbar pseudoclasses in Chrome) for an element styled with it? Here's an example: <body><div #a></div></body> <style> #a::-webkit-scrollbar { width: ...

javascriptcss