Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by garrycohen
garrycohen
13,914 Points

How to select specific H3 tag

can someone please help.. cannot seem to work it this out..I need to select this specific h3 tag to change the styling.. but cannot seem to correctly select it.. 

<div id="pagecontent" class="clearfix">
<form action="?" method="post">
<p> Fill out the form below and I will get back to you.</p>
<h3 id="feedback"><?php echo $feedback; ?></h3>
<fieldset>
<div>
<label>Name </label>
<input name="name"  id="name" type="text" class="form-poshytip" title="Enter your full name" />
</div>

would it need to be...? 

#pagecontent h3 {
}

or 

.clearfix h3 {
}

i know its simple but just cannot figure it out!

Thanks

3 Answers

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

You could select the h3 both of those ways, since #pagecontent and .clearfix are its parent. You could also, since you only have one h3, just write h3{ }. However, assuming you are going to have more h3s, since you gave the h3 a specific ID, I would recommend using #feedback, so that you know, using its unique identifier, if you add more h3s, you won't have to worry about the others getting selected.

garrycohen
garrycohen
13,914 Points

Thanks Adam, that makes sense and worked perfectly.

Cesar Guerrero
Cesar Guerrero
11,190 Points
Cesar Guerrero
Cesar Guerrero
11,190 Points

If you want to select a specific h3 tag, you must give that element an id. An id is a unique selector in html which can be accessed through javascript or css. When using an id, the css styling never gets repeated so it is perfect for when only needing to assign it to one specific element.

Heres an example with your situation

        ```html
         <h3 id="feedback"><?php echo $feedback; ?></h3>
        ```

So you can select that specific h3 element you need with

        ```
         #feedback
         {
            //Apply Styling Here
         }
        ```
garrycohen
garrycohen
13,914 Points

Many thanks for your help Cesar!

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Garry Cohen:

When it comes to selecting specific types of elements, you may want to be very careful resorting to an id. Depending on whether the context h3 is used in your content will be frequent or not, it may be better to leverage a class of the overall component it is part of, also considering :only-of-type, nth-of-type, and first-of-type.

I would say a use of id is overkill in this particular case. 

// Note I'm using Sass for brevity purposes 

#pagecontent h3 
  // Some styles here 

#pagecontent h3:first-of-type 
  // Some styles here. 

#pagecontent .subheader 
  // h3 == .subheader; in case you need more than one
garrycohen
garrycohen
13,914 Points

Hi Kevin, many thanks for your help here.

I hope one day this kind of stuff will become second nature to me.. but hopefully with lots of practice and help from guys like yourself on here it will be possible!

Cheers Garry