CSS Question

[hversemann]

Ultimately I want to suppress the display of a "selected h3" tag, so its not be displayed when a page is being printed.

Normally I would code something like this:

h3 {display:none;}

If I knew exactly how to select the h3 tag in the code example below.

So how do I select the <h3> tag containing the text/verbiage “Success Stories” just before the <div> tag with the
class of “verticalCallouts” shown in the abbreviated code example shown below:

<h3>Success Stories</h3>
<div class="verticalCallouts">...</div>

I've tried everything I can think of and also have not found any examples of selecting a tag before a known tag and class.

This is part of a project to create a print.css file, that will eventually be used to print most if not all of the pages on our school website.

Any help would be greatly appreciated.

Thanks.

Henry

[Beverleyh]

I've tried everything I can think of and also have not found any examples of selecting a tag before a known tag and class.Unfortunately there is no parent or previous sibling selector in CSS.

Is there a specific element above/before it that you can target it with instead? You might be able to use adjacent sibling selector (+) or general sibling selector (~) -- or even an attribute selector (and any combination thereof).

The surest way would be to give the h3 element a class and target it specifically.

Unfortunately, without looking at the markup it would be impossible to make any other useful suggestions.

Considering the reason for your post, you might also find the print CSS blog post useful http://www.dynamicdrive.com/forums/entry.php?328-Print-CSS-Setting-up-a-Print-Stylesheet

[hversemann]

Thanks Beverley. I will take a look at that link.

[hversemann]

Beverley,
Is there a way I can send you a pdf of what the page's markup looks like(a screen print of Chrome inspector), for the particular and complete div in which the h3 in question resides? I've tried unsuccessfully to attach a pdf to this reply to you, but the one I have is too large and apparently exceeds the max size allowed in replies for this forum.
I'm still looking and trying things that look like they might work, but so far no luck.
Let me know when you can.
Thanks.

Henry

[Beverleyh]

A link to the actual page would be best. Or you could provide the markup via JSBin, JSFiddle or Codepen. It's best to keep questions and answers in the forum so that others can offer suggestions (I'm not back at a desk until Monday and can only spare time around my own work, if such a window presents itself during my breaks and personal projects) and future posters might then benefit too.

[hversemann]

Beverley,

I was finally able to suppress the h3 based on your previous suggestions (thank you for that).

The css rule that I finally coded looks like this:

#rightColumn table:last-of-type+h3 {display:none;} /* suppresses the "Success Stories" h3 header. */

which seems to suppress most of the h3's that I want to target for suppression, however some others are still displaying, but they seem to show due to variations in content from one page to the next.

So I'm considering using some javascript/jQuery to complete suppression of these remaining few occurrences, at some point in the future.

The page I was originally using to test this with can be found here:

https://www.stchas.edu/academics/majors-degrees-certificates/Computer-Aided-Drafting-AAS

Thanks again for all the help thus far.

Henry