FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Nested Elements

#1

This community-built FAQ covers the “Nested Elements” exercise in Codecademy’s CSS lessons.

FAQs on the CSS exercise Nested Elements

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

1 Like
#2

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

#3

total newb here.

just wondering, using selectors in css, what is the difference between writing:

h5.description {…}

and

.description h5 {…}

Please help :slight_smile:

3 Likes
#4

I have the same question.

#5

From the summary page of the lesson:

  • Multiple selectors can be chained together to select an element. This raises the specificity, but can be necessary.
  • Nested elements can be selected by separating selectors with a space.

So I think h5.description{} would apply to h5 elements with a class of “description”, whereas .description h5{} would apply to h5 elements nested inside elements with a class of “description”. This was explained in exercises 12 and 13.

3 Likes
#6

Hi,
I am totally new to the code world, I hope what is below will make sense!

Can I select and style a particular item in a <ul> or <ol> ?
Example:

<ul>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>

How can I select the “item2” and make it for example bold while keeping “item1” and “item3” the same?
Thanks

#7

One way is to use child selectors, known as pseudo-class selectors.

If we can assume there is only the one list, then,

li:nth-child(2) {
  font-weight: bold;
}
1 Like
#8

I m a rookie and waiting for help…

Thanks for community I got the right answer but i got confuse

what’s the different between the .description h5{} and h5{}

I can’t see any different after run…

#9

Am I right in thinking, though, that in @br3wn0’s particular example (above) just adding <strong></strong> tags within the HTML, as follows, would be more straightforward and tidier?

<li><strong>item1</strong></li>

Using the same example of targeting one particular item in a list, if we wanted to make other style changes (e.g. colour, font-family etc.), again, would it not make more sense to just add to the HTML, this time with an inline style attribute? e.g.

<li style="colour: red; font-family: cursive;">item1</li>

However, I’m interested to know in which kinds of situations you would consider these CSS pseudo-class selectors to be more efficient , and ‘better practice’, than using individual HTML tags or inline style attributes. :thinking:
Or is it more a matter of personal choice and style? :dancer::man_dancing: :athletic_shoe: :hiking_boot: :high_heel: :smiley:

#10

While we may wish for a list item to stand out visually, we may not wish to give it any more aural emphasis than the others, so, <strong></strong> would be semantically inappropriate.

The equivalent markup to font-weight: bold is <b></b>. Since CSS is a cleaner approach, that would be the optimum choice.

That would be a simple ‘no.’ Inline style attributes are never the way to go. Not only does it clutter up the markup, it also supercedes the cascade by giving more importance than would have a style sheet rule. Overriding inline style rules is a giant hassle and maintaining them an even bigger one.

In CSS we are not looking for efficiencies, but maintainability and flexibility. Inline rules go right against the grain of both. Best practice would be to never use inline style rules, except perhaps to test a style. Once it is fashioned to suit, a selector rule should be created and styles moved over to the style sheet…

1 Like
#11

What is the difference between [ .destination h2{} ] and [ h2.destination{} ]

#12

Plenty.

.a b is a descendancy combinator. It applies to child elements of type b with parent of class a.

b.a is a chained combinator. It applies to type b elements with class a.

1 Like
#13

hello so in this exercise when we type
.description h5{
color: teal;
}
why the first h5 is not changin the color ? all the rest h5 changed exept that

#14

Because the CSS selector .description h5 only targets the h5 elements nested within (children of) elements with class="description".

All of the <h5> Top Attractions titles change colour to teal, because they are all nested within <div class="description"> elements.

However, the first <h5> (By: Stacy Gray) doesn’t change colour, because it is a direct child of <body> (which doesn’t have class="description").

For all of the h5 elements to change colour, the CSS selector would have be just h5.

1 Like