Help with Nested Elements (Learn CSS course)


#1

Hey, sorry if this is posted in the wrong place or has been covered somewhere else, I’m a newbie and just started using codeacademy only recently.

I’m on slide 13/17 (Nested Elements) in the Learn CSS course and am confused why my input needs to be this:

.description h5 {
color: teal;
}

when I had a “similar looking” input earlier on in my code:

h2.destination {
font-family: cursive;
}

What is the difference in functions between these 2 pieces of code? Don’t they both target respective classes for given elements h5 and h2? When should I use one vs. the other?

Thanks in advance.

*Edit: is it the fact that the first “prioritizes” the .description elements nested only in h5, whereas the second “prioritizes” all the h2 elements? Still kind of confused…


#2

Please post a link to the exercise. Thanks.

The above selector targets any H5 that is a descendant of the ‘.description’ class.

The above selector targets any H2 with a class name, destination.

The two are very different from one and another.


#3

Well, here’s the URL of the slide 13 webpage I was talking about, don’t know if it’ll work though:

https://www.codecademy.com/courses/learn-css-selectors-visual-rules/lessons/css-setup-selectors/exercises/nested-elements?action=lesson_resume&course_redirect=learn-css

Here’s the URL of the course:

https://www.codecademy.com/learn/learn-css

I’m doing CSS Setup and Selectors.


#4

Think I understand what you mean, thanks.


#5

Compare these two…

<div class="description">
    <h5>description subheading</h5>
</div>
<h2 class="destination">Destination</h2>

#6

Ok, got it.

So is a descendant like h5 mean that it’s just written directly under the description class, indented in, like your example?

And sorry this is super elementary, but I’m sort of getting mixed up between HTML and CSS. HTML elements have tags which contain attributes, while the terminology in CSS is tags contain classes, and ID is an attribute?

Thanks again, appreciate it.


#7

Yes, and then some.

<div class="description">
  <h5>description subheading</h5>
  <div>
    <h5>description subheading</h5>
    <div>
      <h5>description subheading</h5>
      <div>
        <h5>description subheading</h5>
      </div>
    </div>
  </div>
</div>

The selector will target every H5 in this nested structure.

Never be sorry for learning something new. It’s hard for everybody and only made easier by asking, even it be another learner.

SGML is how for four decades or more text has been marked up for structure and print formatting going back to early word processors when there were reveal codes in the inline text where we could mark up the document we were creating.

Pre-version 6, Word Perfect was not a GUI, WYSIWYG, but the workings of both versions were the same… Markup. Thanks to whomever devised this system (research needed) but it is the genesis of what we have today… HTML.

Most people relate HTML to Tim Berners-Lee but in reality he is the one who made the connection to the web, and the creators of HyperCard were the real creators of HTML.

CSS came along after the HTML language was adopted for the WWW and was easily the best thing to ride in on TBL’s coattails since the World Wide Web, itself.

The two API’s have no similarity or purpose. The one is for demarcating document phrases, lists, paragraphs, etc. while the other deals only with the attributes of targeted nodes.

This is where we hit upon the term, attributes. Attributes relate to objects. Take for instance a meal object.

meal = {
    appetizer : 'antipasto',
    soup      : 'minestrone',
    entree    : 'eggplant parmigiana lasagna',
    main      : 'grilled fish with artichoke caponata',
    dessert   : 'amaretto biscotti'
}

The meal object has five attributes, each with a given value. We could add more, including price, but that’s not the point. A meal object has attributes.

Now when we view HTML elements as objects, we can assign the same type of attributes to them, as you will find in the permitted attributes list of every HTML element in the specification

<type attribute="value">text node or object</type>

<voidType attribute="value">

Style sheet selector rules are also objects, but they become attributes of targeted nodes, and join the list mentioned above. In this sense they are attributes that are objects with their own attributes. When a page loads, these attributes get added to the DOM tree first constructed from the HTML. Once all the attributes have been written to the DOM the page gets drawn.

Mull this over and finer detail can subsequently emerge.


#8

Separate post for this one as the previous was rather drawn on (pun intended).

Both ID and CLASS are a form of identification, though ID is simple… Target the one element with the ID, ‘element-id’.

Classes are a whole 'nother world from ID’s. Simple enough that we create a fragment in the page and give it an id attribute, but what does that tell readers or the browser? It is a singular hook reference in the location bar. Classes can’t be Hyperlinked, only parsed when the page is loaded or modified during the session.

The class of an element could relate to hierarchy, role, flag or other purpose the designer builds in. Neither class nor id are design requirements; rather they are design tools.

An element can have multiple classes attributed to it, but only one id.

Simplistically (albeit not along the lines or best practice) we can draw elements like so.

<p class="red allcap big">foo</p>
<p class="green allcap">bar</p>
.red { color: red; }
.green { color: green; }
.allcap { font-variant: small-caps; }
.big { font-size: large; }

#9

Thank you for taking the time to explain all that, I appreciate it. Think I’ve got everything under control, but if I have any other related questions I’ll be sure to post here or create a new thread.

Cheers!


#10

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