Target a title having a subtitle sibiling in CSS

Question

I want to remove the bottom margin of a title only in case it has a subtitle next to it.

Probably related to Is there a "previous sibling" selector? but that question does not answer my question.

.title, .subtitle {
  border: 1px solid black
}
.title + .subtitle {
  background: yellow;
  margin-top: 0;  
}

<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>

I did not say my comment above will *magically* solve your issue. It's a note, rather important, that you should consider. — ThS, Oct 14 '22 at 10:40
Why do you believe the post you reference is not exactly what you're asking for? — possum, Oct 14 '22 at 10:50
the *probably related* is a perfect duplicate (make sure to read all the answers there) — Temani Afif, Oct 14 '22 at 11:00
`.title + .subtitle` - the _target_ of that rule, the element it will actually apply to, is still `.subtitle` (as already clearly evidenced by the background color in your example) - so if you _know_ how much bottom margin the `h3` has, you could apply the same amount of _negative_ margin-top to `.subtitle` now, to drag it back up ... — CBroe, Oct 14 '22 at 11:06
Maybe what you need is css `:has()`: `.title:has(+ .subtitle) { background: red; margin-top: 0; }` — blurk, Oct 14 '22 at 11:08
Why is the HTML structure so "inconsequent" here to begin with, why is `
my other text: top space OK
` _inside_ the `header`, whereas in the first one, the text came _after_ the header, and only title and subtitle are part of the header? If that wasn't the case - then you could just disable the margins of the h3 and p _inside_ the header, and give header a margin-bottom instead. — CBroe, Oct 14 '22 at 11:18
@CBroe, I don't know, I want to remove the *bottom* margin of the `title`, not set the *top* margin of `subtitle`, this why my question — serge, Oct 14 '22 at 11:21
@serge there are a lot to enumerate all of them. You are looking for a "previous sibling selector" and the duplicate provide all the possible ways to do it. — Temani Afif, Oct 14 '22 at 11:38
Just read the duplicate. Don't expect to get a ready-to-copy-past answer, you need to understand the tricks used in the duplicate and use them. By the way, someone already gave "one" answer in the comments here which is one among many. — Temani Afif, Oct 14 '22 at 11:43
don't add an answer to the question. A question need to remain a *question*. Duplicates are made for the purpose to redirect people to a unique place to find the answer. — Temani Afif, Oct 14 '22 at 13:22
_"I want to remove the bottom margin of the title, not set the top margin of subtitle, this why my question"_ - and because that is not so easily possible, I am trying to suggest you _alternatives_ to get the same end result ... — CBroe, Oct 14 '22 at 13:42
@CBroe: first of all, this is possible: `.title:has(+ .subtitle) { margin-bottom: 0; }` and second, "not set the top margin" — serge, Oct 14 '22 at 14:04
@TemaniAfif If people, like me, would open the duplicate *question* (not the *answer*!) they would not find so easy the solution, because, at first view, the duplicate question does not answer the question (the proposed answer is NOK) — serge, Oct 14 '22 at 14:06
@serge it still lacks in browser support, notably Firefox where the user would have to explicitly enable it via flags. https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility — CBroe, Oct 17 '22 at 05:59
@CBroe firefox has same behavior when using copy image to clipboard... this is why it is 3.14% of the browser market share... just don't use it ) I used it before when was young... ) — serge, Oct 17 '22 at 07:13

score -1 · Accepted Answer · answered Oct 28 '22 at 07:27

as @blurk suggested .title:has(+ .subtitle) works in most modern (chromium + safari) browsers, + in FF accessible via flags (why people from FF do such a pervert things?)

.title:has(+ .subtitle) { 
  margin-bottom: 0; 
}

.title, .subtitle {
  border: 1px solid black
}

.title + .subtitle {
  background: yellow;
  margin-top: 0;
}

<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>

score -3 · Answer 2 · answered Oct 14 '22 at 10:54

Not sure that's what you need. Try this?

/* 
This is a common technique called a CSS reset. 
Different browsers use different default margins, causing sites to look different by margins.
The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers. 
*/

* {
  margin: 0;
  padding: 0;
}

/* 
The comma groups classes (and applies the same style to them all. Just use the individually).
*/

.title {
  margin-bottom: 0;
  border: 1px solid black
}

.subtitle {
  margin-bottom: 1rem;
  background: yellow;
  border: 1px solid black
}

p {
  margin-bottom: 1rem;
}

Target a title having a subtitle sibiling in CSS

2 Answers2