Adjacent selectors and headers


by Jeremy Caudle
code

I'm doing another bit of practice via my phone, so today's is a little light. It feels like a good thing to practice though. After listening to the episode of Smashing Podcast about CUBE CSS, I know there's a lot of useful techniques I need to learn.

Big Header

Sub-header that sits right below Big Header

I'm interested in learning about ways to structure my CSS to be as effecient and light as possible. I'm not sure how quickly I'll be able to improve, but I'm going to keep trying

Another topic

additional info about topic mentioned above

I saw this type of technique in a video about the new features of Safari in MacOS 11, and thought it would be nice to see how it has been done for a while now. They mentioned adding support for the :is selector which will make the former technique much less effecient. I'm looking forward to that selector getting better support in browsers.

View the code:

HTML and JS 
<div class="codedoodle-block">
<h1>Big Header</h1>
<h2>Sub-header that sits right below Big Header</h2>
<p>I'm interested in learning about ways to structure my CSS to be as effecient and light as possible. I'm not sure how quickly I'll be able to improve, but I'm going to keep trying</p>

<h3>Another topic</h3>
<h4>additional info about topic mentioned above</h4>
<p>I saw this type of technique in a video about the new features of Safari in MacOS 11, and thought it would be nice to see how it has been done for a while now. They mentioned adding support for the :is selector which will make the former technique much less effecient. I'm looking forward to that selector getting better support in browsers.
</div>
CSS 
.codedoodle-block {
margin: 2rem 0;
padding: 1rem;
background-color: #dedede;
}

h1, h2, h3, h4, h5, h6 {
margin-top: 3em;
margin-bottom: .5em;
}

h1 + h2, h3 + h4 {
margin-top: 0;
}

Tags