McDuck4 McDuck4 - 1 month ago 6x
CSS Question

background color on individual h2 tag

I am a little bit in doubt of a small thing here. I have made a wireframe, that I started to make. The line: "A catcy piece of text" has to have a background. But how do I make that background, without styling all h2 tags? As I understand it is not good practice to give a h2 tag a class?



<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">COMPANY NAME</h1>
<h2 class="text-center">Change this <b>subline</b> here</h2>
<p class="text-center">
<a href="#" class="btn btn-blue btn-lg btn-huge lato" data-toggle="modal" data-target="#myModal">Get Free Membership</a>
<h2 class="text-center">A CATCY PEICE OF TEXT</h2>

<p class="text-center"><i>Enter your email for more news</i></p>


Using an ID or even a unique class is fine, nothing wrong with it. But to answer your question without referring to the classes, you need to use the hierarchy of your DOM elements. One such way would be:

section > div > p + h2 {...}

The says select the h2 element that is the adjacent sibling of a paragraph that is the child of a div that is the child of a section.

Check out the MDN section on CSS combinators for more info.