Can you target multiple elements with a common ancestor in CSS using class, id, etc? For example:
table.exams caption, tbody, tfoot, thead, tr, th, td
If not, is there a method to select all nested elements within that particular element?
Can you target multiple elements with a common ancestor in CSS using class, id, etc? For example:
table.exams caption, tbody, tfoot, thead, tr, th, td
If not, is there a method to select all nested elements within that particular element?
Can CSS select multiple elements with a common ancestor?
This functionality can now be achieved using the :is() pseudo-class, which evolved from the original :matches() mentioned in the previous version of this response. It's important not to confuse it with :where(), as that removes specificity crucial for your selector:
table.exams :is(caption, tbody, tfoot, thead, tr, th, td)
Prior to :is(), duplicating the entire ancestor selector and listing all descendants was necessary1:
table.exams caption,
table.exams tbody,
table.exams tfoot,
table.exams thead,
table.exams tr,
table.exams th,
table.exams td
The introduction of the pseudo-class notation during the finalization of Selectors 3 allowed for this capability, with recent implementations emerging gradually. Refer to this answer for additional context.
In essence, the officially recognized pseudo-class is now :matches(). Once browsers fully support :matches(), you'll be able to simplify selections like so:
table.exams :matches(caption, tbody, tfoot, thead, tr, th, td)
1 With tables specifically, one could use
as a workaround. However, this approach is convoluted (especially considering scripting elements or nested tables) and it's generally more effective to explicitly list desired descendants.table.exams > :not(colgroup), table.exams > * > tr > *
A new way to achieve this is by utilizing the :is() selector. To target a larger selection while excluding a smaller ratio, you can combine it with the :not as shown in the code snippet below:
The compatibility of this selector spans across the latest versions of all major browsers (Edge, Firefox, Chrome, and Safari): https://caniuse.com/?search=is as of 26th January 2021.
.match-elements :is(.match-1,.match-2,.match-5,.match-10) {
background: #5548B0;
}
.match-elements :not(:is(.match-1,.match-2,.match-5,.match-10)) {
background: #BADA55;
}
/* For snippet styling, not required */
.match-elements div {
font-family: sans-serif;
font-weight: 600;
color: white;
padding: 10px;
margin: 10px 0;
}<div class="match-elements">
<div class="match-1">Matched using is</div>
<div class="match-2">Matched using is</div>
<div class="match-3">Matched using not</div>
<div class="match-4">Matched using not</div>
<div class="match-5">Matched using is</div>
<div class="match-6">Matched using not</div>
<div class="match-7">Matched using not</div>
<div class="match-8">Matched using not</div>
<div class="match-9">Matched using not</div>
<div class="match-10">Matched using is</div>
</div>Can CSS select multiple tags with a shared ancestor of a specific class?
By utilizing SCSS, a similar outcome to :matches can be achieved, as detailed in this informative piece
In addition, some browsers offer limited support for :matches when used with vendor-specific prefixes.
I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...
Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, wheth ...
I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below: function displayTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsB ...
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p> ...
I have been searching for solutions to my problem, but I can't seem to find one that works. My goal is to create two columns that each take up 50% of the screen width. However, I am facing an issue where there is a gap at the top that I cannot seem t ...
I am currently utilizing the jQuery addClass and removeClass animate feature for my project. Basically, what is happening is that when the user clicks on a particular link, a dropdown navigation will appear. This feature is essential for ensuring responsi ...
At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...
Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...
How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...
In need to style four buttons in a consistent way, but each one should have its own unique image. Three styles are required: one for normal state, and the others for hover and focused states. Using CSS for this task would involve a lot of repetition, as ...
How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...
I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4. The main issue is that the modal disappears too quickly. Chec ...
I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...
I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...
Looking to create a design with a straight line that features two colors and a slanted line in between. Here is an example of the desired result: https://i.stack.imgur.com/9ys6e.png ...
There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance. Here is the CSS code causing the overlap: .Pad{ padding: 6 ...
In the process of creating my inaugural project featuring a collection of images, I wanted to include a filter/search bar at the top. This bar would dynamically filter the displayed pictures based on user input. For example, typing "Aatrox" into the search ...
I am working on creating a login screen that resembles the image provided. I have managed to set the background image, input fields, and buttons successfully. However, I am encountering a few issues: The width of my input field is taking up the entire spa ...
Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...
My <textarea> needs to fit into a space that is a percentage of the screen size, but I'm encountering some issues with different browsers. In FireFox, I am able to achieve good results by setting the CSS properties as follows: #container { width ...