1

I'm trying to come up with a CSS-only solution to target any cards that only have headers in them with no body (so that they can automatically have no margin-bottom). I realize I am most likely missing a relatively basic concept of CSS here, so I don't mind if this question isn't "solved" per se, but that I understand why this isn't valid.

Thank you

Edit: here is the example HTML to pair with this. Sorry about that.

I would want to be able to target this .card-header, but not the .card-header of the example below this.

<div class="row">
            <div class="col-sm-12">
              <div class="card card-default">
                <div class="card-header">Card Title</div>
              </div>
            </div>
          </div>

<div class="row">
            <div class="col-sm-12">
              <div class="card card-default">
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-12">
                      <p>What information do we want here?</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Does that make more sense? I'm not trying to target the .card, so it isn't that I'm trying to target a parent, but rather a sibling when a specific sibling doesn't exist.

Jared
  • 21
  • 1
  • 6
  • could you show your html too please but my guess is because you cannot do a parent selector based on it's children as css is cascading (the clue is in the name) – Pete May 23 '18 at 14:50
  • 2
    You can't select parent class `.card` according to the presence of a child `.card-body` with pure css – Clément Jacquelin May 23 '18 at 14:53
  • why not just remove the bottom margin from your heading and then put top margin on the body, that way if your body is not there, your heading margin won't create the extra space – Pete May 23 '18 at 14:58
  • Hey Clément, I'm not trying to target the main .card here, but a sibling when a certain sibling doesn't exist. – Jared May 23 '18 at 15:37
  • Hey Pete, I've added the HTML so it is easier to understand what I'm trying to accomplish. I am aware there are many ways to accomplish this as well, but I was curious about exactly why this selector isn't working. – Jared May 23 '18 at 15:38
  • Also, I don't think I saw an exact question like this - e.g. one solution that might be suggested is to do something like ".card > div:last-child:not(.card-body)" and that would work perfectly fine. My question is more so directed at discovering exactly why the selector I listed in the question wouldn't work. – Jared May 23 '18 at 16:10

0 Answers0