Css selectors question

HTML & CSS
1

hey folks, i’m having trouble selecting same elements in different with different classes.
example:

<section class="section-a">
  <h1>Lorem</h1>
  <p>lorem ipsum</p>
</section>

<section class="section-b">
  <h1>Lorem</h1>
  <p>lorem ipsum</p>
</section>

l want to target the h1 and p tags in section-a only and style them differently, what is the correct selector form?

thanks!

2

Welcome to the forums, @chalimkamoc. When you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

1 Like
4

Thanks, figured! are you bot? :smiley:

5

To select the h1 and p separately you could use:-

.section-a h1 {
    /* styles for h1 */
}
.section-a p {
    /* styles for p */
}

To style everything inside of the class the same, just use:-

.section-a {
    /* Styles for all of section-a */
}
1 Like
6

Me? No, I’m a bear (and a moderator).

2 Likes
7

Nice to meet you! :smiley:

1 Like
8

ok so i didn’t post good example, the problem, i have it like this for one section:

<section class="benefits wrapper">
        <div class="col one">
          <img src="img/advice.png" alt="Advice Icon">
          <h2>Experts Advisor</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
        </div>
</section>

and for other section:

<section class="services wrapper clearfix">
        <div class="services_primary">
          <div class="box web_design">
              <img src="img/monitor.jpg" alt="Monitor">
              <h3>Web Design</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
          </div>
        </div>
</section>

the question is how i target the h3 and p inside <section class="services wrapper clearfix"> all the h3 and p are also in diffeent div with different classes?

<!-- NOTE: SERVICES -->
      <section class="services wrapper clearfix">
        <!-- NOTE: SERVICES "Primary Left" -->
        <div class="services_primary">
          <div class="box web_design">
              <img src="img/monitor.jpg" alt="Monitor">
              <h3>Web Design</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
          </div>
          <div class="box web_development">
              <img src="img/monitor.jpg" alt="Monitor">
              <h3>Web Development</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
          </div>
          <div class="box graphic_design">
              <img src="img/monitor.jpg" alt="Monitor">
              <h3>Graphic Design</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
          </div>
        </div>

        <!-- NOTE: SERVICES "Middle" -->
        <div class="services_middle">
          <h2>Our Services</h2>
          <img src="img/standing_figure.png" alt="Male Pose">
        </div>

        <!-- NOTE: SERVICES "Secondary Right" -->
        <div class="services_secondary">
          <div class="web_design">
              <h3>Web Design</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
              <img src="img/monitor.jpg" alt="Monitor">
          </div>
          <div class="web_development">
              <h3>Web Development</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
              <img src="img/monitor.jpg" alt="Monitor">
          </div>
          <div class="graphic_design">
            <h3>Graphic Design</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convall.</p>
            <img src="img/monitor.jpg" alt="Monitor">
          </div>
      </section>
9

Are you wanting to target all of the <h3>s and <p>s in the section, or just one of them?

1 Like
10

jeez, nevermind… i’m so confused right lol that i dont even know 100% what i’m after… have to play again with code to get my mind going to the point.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.