how to effect a peoperty on the first the h1 element on CSS?

Question

I want to effect the text as the first h1 below .contactSection. However I used nth-child(1) for the class, the two h1 elements inside .contactSection are subjected. I do not know how to put some margin onto the first h1 element.

.contactSection {
  width: 100%;
  text-align: center;
}

.contactSection button {
  padding: 4% 16%;
  background: #f42988;
  border-radius: 30px;
  color: cornsilk;
  font-size: 10pt;
  border: none;
}

.contactSection p {
  padding: 0 2%;
  z-index: 1;
  position: relative;
}

.contactSection h1:nth-child(1) {
  margin-top: 15px;
}

.formTitle {
  font-size: 32px;
  color: cornsilk;
}

.contactForm {
  width: 80%;
  background: #e32b7a;
  margin: 5% 10%;
  padding: 4% 10px;
  border-radius: 30px;
}

<section class="contactSection">
  <h1>Information</h1>
  <div class="contactForm">
    <div class="post">
      <h1><span class="formTitle">This page is under construction</span></h1>
      <p>This page will come up very soon. Sorry for inconvenience. We also post any info on facebook, Twitter, and Instagram. If you check out and follow them up, I would be greatful. Thanks!</p>
    </div>
  </div>
</section>

Carl Edwards · Accepted Answer · 2020-02-09T05:13:21.113

0

If you're trying to grab the first <h1 /> within .contactSection, your best bet is to use a child combinator:

.contactSection > h1 {
  margin-top: 15px;
}

This will select the first immediate descendant <h1 /> elements of .contactSection. If in the event you want only the first h1 that appears as the first child of the .contactSection div you can combine the former with :first-child:

.contactSection > h1:first-child {
   margin-top: 15p;x
 }

.contactSection {
  width: 100%;
  text-align: center;
}

.contactSection button {
  padding: 4% 16%;
  background: #f42988;
  border-radius: 30px;
  color: cornsilk;
  font-size: 10pt;
  border: none;
}

.contactSection p {
  padding: 0 2%;
  z-index: 1;
  position: relative;
}

.contactSection > h1:first-child {
  margin-top: 15px;
}

.formTitle {
  font-size: 32px;
  color: cornsilk;
}

.contactForm {
  width: 80%;
  background: #e32b7a;
  margin: 5% 10%;
  padding: 4% 10px;
  border-radius: 30px;
}

<section class="contactSection">
  <h1>Information</h1>
  <div class="contactForm">
    <div class="post">
      <h1><span class="formTitle">This page is under construction</span></h1>
      <p>This page will come up very soon. Sorry for inconvenience. We also post any info on facebook, Twitter, and Instagram. If you check out and follow them up, I would be greatful. Thanks!</p>
    </div>
  </div>
</section>

edited Feb 09 '20 at 05:13

answered Feb 09 '20 at 03:50

Carl Edwards

13,826
11
57
119

Hi @Carl, I see. I will try to do that. I have never used ">" before. Idk what the symbol stands for. I will search it. I know the def of it in JavaScript, not in CSS – JKK Feb 09 '20 at 03:53
Hey. I updated my answer. You could also `first-child`, which might be better. Let me know if either solution works. – Carl Edwards Feb 09 '20 at 03:54
Oh Okay I will also try that too !Thank you – JKK Feb 09 '20 at 03:54
I think it works! The problem is that if I put margin onto the first-child h1, the other h1 (formTitle) also moves. I do not know why two elements are moving together although I indicates the first-child – JKK Feb 09 '20 at 03:56
Okay. In that case we'd go with my first solution. Give me a sec to update. – Carl Edwards Feb 09 '20 at 03:57
Updated. Let me know if that works. – Carl Edwards Feb 09 '20 at 04:04

score 0 · Answer 2 · answered Feb 09 '20 at 04:26

Answer: If you mention individual element from an nested elements, you should mention in css by this > greater than sign.

Your css code like this type:

.contactSection {
  width: 100%;
  text-align: center;
}

.contactSection p {
  padding: 0 2%;
  z-index: 1;
  position: relative;
}

<!-- .contactSection h1:nth-child(1) {
  margin-top: 15px;
  This is not right way, please skip.
} -->

.contactSection > h1 {
  color: red;
  font-size: 30px;
}

.formTitle {
  font-size: 30px;
  color: green;
}

<section class="contactSection">
  <h1>Information</h1>
  <div class="contactForm">
    <div class="post">
      <h1><span class="formTitle">This page is under construction</span></h1>
      <p>This page will come up very soon. Sorry for inconvenience. We also post any info on facebook, Twitter, and Instagram. If you check out and follow them up, I would be greatful. Thanks!</p>
    </div>
  </div>
</section>

I will try to do that. Thank you – JKK Feb 10 '20 at 06:48 — JKK, Feb 10 '20 at 06:48

how to effect a peoperty on the first the h1 element on CSS?

2 Answers2