Consider the code snippet below:
<div class="section">
<div class="row">...</div>
<div class="row"> <!-- bottom margin here needs to be 0 -->
<div class="section">
<div class="row">...</div>
<div class="row">...</div>
</div>
</div>
</div>
.row {
margin-bottom:10px;
}
If the parent of a div with the class .row is a div with the class .section, the bottom margin should be reset to 0.
While this can be achieved using JQuery, is there a CSS-only solution for this?
As of now, CSS does not have the capability to select the parent element of another element.
However, CSS4 introduces the :has pseudo-class - http://dev.w3.org/csswg/selectors-4/ :has
For example, the following selector targets only
<a>elements that have an<img>child:a:has(> img)Another example is a selector that matches a
<dt>element that is immediately followed by another<dt>element:dt:has(+ dt)Additionally, there is a selector that targets
<section>elements that do not contain any heading elements:section:not(:has(h1, h2, h3, h4, h5, h6))It's important to note that the order of the pseudo-classes is significant in determining the matching elements. For instance, swapping the nesting of the pseudo-classes in the following example:
section:has(:not(h1, h2, h3, h4, h5, h6))...would result in matching any
<section>element that contains any element other than a heading element.
If you are using a recursive function to create your sections/rows, consider adding a class to the row that has sub-sections. This way, you can target that class to apply margin-bottom styling.
To achieve this effect, you can use a negative margin on the .section element that is equal to the default margin of the .row element.
.row {
margin-bottom: 20px;
}
.row > .section {
margin-top: -20px;
}
Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...
I wanted to experiment with setting background-size: cover and testing out different background positions. Feel free to check out the live fiddle for a hands-on experience. HTML <div id="container"> </div> CSS #container { backgro ...
I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...
I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...
My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...
I've encountered an issue with the Firefox Webdriver where it fails to accurately determine if an element is visible. Here is the code I am using, which incorrectly indicates that the element is visible: wait.ignoring(UnhandledAlertException.class).u ...
Is it possible to customize the appearance of specific weekdays (such as all Mondays, all Tuesdays for the entire year) in the JQueryUI datepicker by changing their color? While there are existing methods to select certain dates and disable holidays, I h ...
When attempting to click the left side of the link on the back of this flip card in Chrome, it does not respond. However, hovering over the right side allows interaction with the link: /* Vendor prefixed by https://autoprefixer.github.io */ .card { ...
In my website, I have a reference to a CSS file like the one below: <link rel="stylesheet" type="text/css" href="http://go/css/filename.css"> Now, I want to make changes to this CSS file and upload it to a new location. Can I store the modified fi ...
How can I highlight the span(class="tiny") element individually when its containing div is active or clicked? I have attempted to highlight the tiny span element without success, as only the entire div was highlighted. Here's the code snippet I' ...
I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...
I'm encountering an issue while attempting to apply CSS to an element within a shadow-root by adding a class to it. In my Angular component, I have the following code: CSS .test { border: 1px solid red; } TS document.getElementById('my-div&a ...
I'm struggling to resize a responsive image in Bootstrap using the carousel example on their official website. <div class="container"> <div class="other-div"> .... </div> <div id="carouselExampleCon ...
I've been working on a website at http://onofri.org/WP_BootStrap/ and I'm facing an issue. When using FireBug, I can't seem to locate where in the CSS the image logo.png is defined (this is the small image in the upper-left corner of the the ...
Hello, I am attempting to execute a Python script on an Apache2 server running Ubuntu. Below is the configuration of the server taken from the file 000-default.conf: <Directory /usr/lib/cgi-bin/> Options Indexes FollowSymLinks ExecCGI AddHand ...
I am currently working on implementing a mobile-friendly "filtered dropdown" design: https://i.sstatic.net/SYjQO.png Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open ...
Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...
In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...
I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...
I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...