CSS: id, class, nested elements

Hello! I’m a little bit confused by all the different approaches to style a Text.

  1. Question: The tutorial is quite good but I didn’t understand the exact benefit of id over class or class over id and what the differences are. Would someone explain that to me?

  2. Question: There are other approaches to style your Text like nested elements. Fist we learned that “h2.destination {…}” you can change the looks of your Text and then with nested elements like “.description h5 {…}”. In the example it was shown with lists which totaly makes sense to me since they are clearly nested but the h5 element (Top Attractions) is just a simple little title. Why did we choose this approach over the other and what are the key differences between both?

Thanks a lot!

1 Like

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Maybe just different variations to use.
Hope this helps.
(Where I found the 1st answer:https://www.google.com/search?q=what+is+the+diffrence+between+class+and+id&ie=&oe=)

1 Like

The differences between class and id:

  1. Multiple elements can share the same class, but only one element can have an id. This is helpful once you start changing the content of elements after the page loads. The page knows that only one element has a certain ID, so all it needs to find the element is the id
  2. An element can only have 1 ID, but it can have multiple classes at the same time. This makes an ID much more specific than a class.

The order you put the class and the element in tell it where to find the element. The second item should always be inside the first element. For example, div .description tells it to find all elements with the class “description” inside a div. However, a description is not likely to be part of a header, but the other way around. Therefore it says to find the h5 element that is inside an element with the class “description”.

I hope that helps! If you have any more questions, let me know.

1 Like