How can CSS3 be used to target the initial or final visible element in a selection?

Looking to style form fieldsets with margins, while removing the margin-top for the first non-hidden fieldset and margin-bottom for the last non-hidden fieldset (any fieldset can be dynamically set as hidden by a script). I attempted the CSS below without success (fs2 is supposed to have no margin-top but does; fs3 is supposed to have no margin-bottom but does). Is there a way to achieve this using CSS3?

form > fieldset {
  margin: .5em;
}

/* this doesn't work */
form > fieldset:not([hidden]):first-of-type {
  margin-top: 0;
}

/* this doesn't work */
form > fieldset:not([hidden]):last-of-type {
  margin-bottom: 0;
}
<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset hidden>fs4</fieldset>
</form>

htmlcsscss-selectors

Answer №1

gap was specifically designed for this type of scenario

form {
  display:grid;
  gap:0.5em;
  border:1px solid red;
  margin:10px;
}
fieldset {
  margin:0;
}
<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset hidden>fs4</fieldset>
</form>


<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset >fs4</fieldset>
</form>

<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset hidden>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset >fs4</fieldset>
</form>

<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset hidden>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset hidden>fs4</fieldset>
</form>

Answer №2

If you want to achieve this effect, utilize the adjacent sibling selector, denoted by +:

form > fieldset[hidden] + fieldset {
  margin-top: 0;
}

This code snippet will remove the top margin of the first sibling element following a hidden fieldset:

form > fieldset {
  margin: .5em;
}

/* The following rule does not work as expected */
form > fieldset[hidden] + fieldset {
  margin-top: 0;
}
<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset>fs2</fieldset>
  <fieldset>fs3</fieldset>
</form>

Answer №3

If the styles on your page are set up in a certain way, you can simply add margin to the bottom of your elements as a common solution.

/* Eliminate top margin */
margin: 0 0.5em 0.5em;

However, if you're aiming to get rid of all vertical margins, it might be simpler to use a negative margin on both the top and bottom of the form?

form > fieldset {
  margin: .5em;
}
form {
  margin: -0.5em 0;
}
<span>Lorem</span>
<form>
  <fieldset hidden>fs1</fieldset>
  <fieldset>fs2</fieldset>
  <fieldset>fs3</fieldset>
  <fieldset hidden>fs4</fieldset>
</form>
<span>Ipsum</span>

Answer №4

Just like @j08691 suggested, you could try using the adjacent sibling selector (+) to achieve the desired effect. You may also consider utilizing the first-of-type selector to target only the initial occurrence.

form > fieldset[hidden]:first-of-type + fieldset

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

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

I am attempting to create a unique icon by combining two different bootstrap icons together: https://i.stack.imgur.com/RWiQn.png Despite trying various margin adjustments like top and right, I have not been able to achieve the desired effect. Here is wha ...

htmltwitter-bootstrapcsspositionicons

Tips for enlarging the font size of a number as the number increases

Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...

cssreactjstypescript

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Tips for toggling password visibility by clicking outside a password field

As I work on creating a password field that allows users to toggle the visibility of their password by clicking an eye icon, I am facing a challenge. I want the password to be hidden automatically when the user clicks outside the field, which requires a co ...

javascripthtmljquery

Latest FF 35 showing alert for blank field in HTML5 email input box

My form includes an email input field with a default value. When the user focuses on the field, it clears out if the value matches the default one. Upon blurring the element, the default value is restored if the field remains empty. In Firefox 35, clickin ...

javascriptjqueryhtmlvalidationfirefox

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

javascriptpythonhtmlcssdjango

My vanilla JavaScript code isn't running the smooth scroll function as expected

Struggling to incorporate smooth scroll on Safari using Vanilla js. Despite following the documentation to a tee, the implementation is still not functioning as expected. Outlined below is the vanilla.js code: (function() { scrollTo(); })(); function ...

javascripthtmlcss

Unable to Locate CSS File for MAVEN Web Project Using JSF

https://i.sstatic.net/I5vKT.png What is the correct way to reference it in XHTML? I have seen conflicting information online - some say the file should be placed as shown in the image above, while others mention needing to map resources in servlet-config. ...

cssmavenjsfresources

Java Applet for capturing specific sections of a webpage to create a screenshot

Does anyone know of a way (applet or something else) to capture a screenshot of the content within a specific div on a webpage? I came across this Java code for capturing a screenshot of the entire screen: import java.awt.AWTException; import java.awt.Re ...

javajqueryhtmlwebapplet

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

javascriptcssreactjssass

Steps for positioning a logo to the left and navigation to the right with HTML and CSS

Could someone assist me in aligning a logo on the left and navigation menu on the right using HTML and CSS? I envision it to look like the image displayed. I have tried various approaches to adjust my CSS styling, but nothing seems to be working as inten ...

htmlcss

Unlimited webpage scrolling downward

Recently, I was given a project to enhance a webpage and encountered an unusual issue. When the screen resolution drops below 900px (such as on small laptops and tablets) and you reach the bottom of the page, you can continue scrolling endlessly after seei ...

htmlinfinite-scroll

Save hyperlinks in a storage system

I need to store an article in a MongoDB database, and some words within the article should be clickable links leading to other pages. However, when I display the article using an EJS template, the anchor tags I added while writing the article appear as pl ...

htmldatabaseexpressejsanchor

Choosing the Right Alignment for Your Selection Box

How can I adjust the alignment of the select box to make it inline with the others? I also need to apply this alignment to the three option input boxes. CSS: #newwebsiteSection, #websiteredevelopmentSection, #otherSection{ display:none; } #newwebsite ...

htmlcssformsalignment

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

javascriptjqueryhtmlcssdrop-down-menu

Align labels on top and inputs at the bottom using Bootstrap

I'm facing an issue with alignment in my form using Bootstrap 4.4. Whenever a select element is included, it disrupts the layout by breaking the alignment of labels and inputs on the same row. Is there a way to always keep the labels at the top and t ...

htmlcssbootstrap-4

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

I have been working on this webpage for a school project for a few days, and it was running smoothly until about 10 minutes ago. The only change I made was adding an extra JavaScript validation. Now, when I try to register by clicking the "register" butt ...

javascriptphphtml

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

javascripthtmlcssanimationprogress-bar

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table

Create a circular rolling image effect using CSS3 and jQuery when the page is loaded

My div box features a rounded image that I want to roll like a ball on the floor after the page loads. After rolling, I want to position the image perfectly at the center of the box. css: #box{width:900px;height:150px;position:relative;background:red;ove ...

jqueryhtmlcsscss-transitionscss-transforms