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 am currently in the process of developing a website, and for the header section, I have decided to use a table format where each column represents a different section. The top row will feature a picture link, while the bottom row will display the name of ...
I've been tasked with creating a menu and I want to ensure that the menu item stays selected when its subchild is selected. Below is a snippet from my CSS file: #wrapper { width:100%; height:500px; } h2 { color:#787878; } // more ...
I am facing an unusual scaling issue with my website design. Whenever I resize the browser window horizontally, the image scales correctly, but it leaves a white space below it where the rest of the page should start from if the window is large. I'm ...
I'm looking for a solution that can consistently restrict the clickable link area to just the text within my h2 element. The problem arises when the space to the right of the text is mistakenly included in the clickable region. Here's an example ...
I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...
Seeking to achieve: VueJS integration with Bootstrap for clickable cards I am currently working on a VueJS project where I want the cards to be clickable and reveal collapsible elements upon click. To accomplish this, I have implemented a button with the ...
I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...
Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...
My current project involves importing videos using PHP, utilizing a video tag. However, I've encountered an audio issue while doing so. I've tried various codes such as: <video controls> <source src="https://www.w3schools.com/html/mov_ ...
<div class="baslik baslik1 baslik2 "> <nav class="navbar bg-light navbar-light navbar-expand-sm sticky-top "> <a href="./index.html" class="navbar-brand"><img src="img/512x512logo.png" ...
Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...
For a group project, I successfully centered a div on a webpage. However, I ran into an issue where the website's contents are centered taking the scroll bar width into consideration. This means that the web page contents adjust to be centered without ...
Currently, I am developing a component that involves transitioning an image from a specific starting position and scale to an end position and scale in order to fill the screen. This transition is achieved through a CSS transform animation on translate and ...
Back in the IE6 days, I developed an old application that relies on frames instead of iframes and runs in quirks mode. Now, I'm wondering if it's possible to have one frame remain in quirks mode while another operates in standards mode when using ...
After coming across this query on Stack Overflow about adding a class without jQuery if hovering over another class I encountered an issue with a div element that displays upon hovering over a span, which was functioning correctly. However, I also have a ...
Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...
I've encountered an issue with my code where the footer appears to be stuck at the bottom of the h2_c div instead of the bottom of the .content div where it should be. I have tried using positioning but it hasn't resolved the problem. Thank You. ...
I am struggling with two bugs in my dropdown menu that I can't seem to fix. The navigation links on my homepage take users to different sections of the page instantly when clicked. However, the issue arises when the dropdown menu does not close after ...
I have a design on my website that includes a 3px stroke around the header text to maintain consistency. I don't want to use images for this due to issues with maintenance and site overhead. While I know about the text-stroke property, browser suppor ...
Currently utilizing Angular 1.3 and Bootstrap 3.3.x CSS without the JS functionality. There is also an interesting animated GIF embedded within. <div class="form-group"> <div class="col-lg-3"> <label clas ...