How can I efficiently target all the input[type=text] children from two separate parent classes in CSS?
What is the best approach to achieve this with the following CSS code?
.secciones * input[type=text]
.subsecciones * input[type=text] {
border: none transparent;
background-color: white;
}
Avoid using the wildcard selector in your CSS. It is too broad and generally not recommended:
.secciones input[type=text],
.subsecciones input[type=text] {
border: none transparent;
background-color: white;
}
CSS processes selectors from right to left. For example, in this code snippet .secciones input[type=text]:
- All input[type=text] elements are selected
- Each match is checked to see if it is a (grand) child of .secciones
<div class="secciones">
<div>
<input type="text" placeholder="I will be matched as one of my parents is .secciones" />
</div>
<input type="text" placeholder="I will be matched as one of my parents is .secciones" />
</div>
Using the wildcard selector means "check if input[type=text] is a child of any element. Starting with * selects everything, which can lead to unintended consequences.
To target only the direct children of a selector, use .secciones >input[type=text]:
- Selects all input[type=text]
- Filters out those that are not direct children of .secciones
<div class="secciones">
<div>
<input type="text" placeholder="I will NOT match, my direct parent is NOT .secciones" />
</div>
<input type="text" placeholder="I will match, my DIRECT parent is .secciones" />
</div>
An instance where you may want to use a *: .hideNextElement + *:
<div class="hideNextElement">click me to show next</div>
<div>I can be ANY element. With some JS I can become visible.</div>
Avoid using *.
Try replacing it with ,. You can achieve this by:
.sections input[type=text],
.subsections input[type=text] {
border: none transparent;
background-color: white;
}
I trust this information is beneficial to you!
If you wish to style all descendants of the elements with classes .secciones and .subsecciones, you can utilize the descendant combinator:
.secciones input[type=text],
.subsecciones input[type=text] {
border: none transparent;
background-color: white;
}
If your aim is to target only the immediate children of the elements with classes .secciones and .subsecciones, you can employ the child combinator:
.secciones > input[type=text],
.subsecciones > input[type=text] {
border: none transparent;
background-color: white;
}
You may delve deeper into using combinators by visiting the MDN for more information here.
Struggling to apply different styles to the same class when it appears for the second time in the markup using the Subsequent-sibling combinator "~". It seems like there may be a detail I'm missing with the use of "~". Unfortunately, the HTML cannot b ...
Currently, I am delving into the world of Python and challenging myself with a project that involves using Selenium to interact with websites. While navigating through an element in HTML by its id, I found myself stuck when trying to access the heading ins ...
Currently, I am in the process of configuring my ajax form to display an alert box when it either succeeds or fails. The form includes options for two different boxes, a datepicker, email address input, and phone number input. My main query is regarding ho ...
I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...
I use a modified version of Magento 1.6.2 with significant customizations, particularly to the shopping cart template. Encountering an issue when users click the 'back' button in the browser after adding an item to the shopping cart. This proble ...
As an illustration of my point, I have put together a sample page: The issue I am facing is with a narrow map canvas and an infowindow in it. Upon clicking the marker, the map sometimes fails to center properly and the marker along with the infowindow sli ...
My goal is to display a table with 5 values in each row based on the input number. However, I am facing an issue where when I input 67, the output does not show the remaining empty cells in the table as desired. I want to always echo a number of cells that ...
I am working with a flex container called .container and two flex items: item-one and item-two. My goal is to center the first item vertically and anchor the second item to the bottom. Struggling to figure out how to vertically align the first item within ...
I recently inserted a basic HTML code into my website. <header><p>hello</p></header> However, I encountered an error stating that the HTML, CSS or script is invalid and therefore preventing me from publishing it. Does anyone have ...
I'm using C3.js to create a line chart. After generating the SVG, I am converting it into a .png image using a canvas element. Everything is functioning properly, except that the x-axis label is getting cut off in the image. I have set the canvas wid ...
Struggling to make the drop-down menu function properly in Bootstrap, but so far no success. Check out the code on this jsfiddle link. <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-to ...
Currently, I am working on developing an Android application for a third-party website over which I have no control. Users of this website are required to log in before accessing its features. The login process on the website involves inputting details int ...
I am currently working on a module for a responsive website that involves tapping the initial screen to reveal a panel from the right. The user can then tap a close button to hide the panel. However, there is an issue where if the user taps multiple times ...
My current project involves creating a canvas drawing app, and I've successfully implemented a function to save the image as a PNG file. However, I'm encountering difficulties when it comes to exporting the image as an SVG file. Can anyone provid ...
Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...
Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...
I've encountered an issue with the bootstrap selectpicker. When I try to click on the dropdown list, an error appears and I'm unable to use data-live search. I attempted to change the bootstrap version, but unfortunately, that did not resolve the ...
Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...
Often, I want to incorporate a Bootstrap 5 dropdown menu into my project, but I encountered an unexpected issue. The menu opens correctly, but when I hover over the menu items, the hover effect is not triggered, and clicking on a link does not work. It ap ...
Currently, I am utilizing bootstrap 3 in my project. Upon discovering that Bootstrap 4 is a significant overhaul of the entire Bootstrap project, I am contemplating whether it is essential to transition from version 3 to 4. Is there a compelling reason t ...