Css hates me

i been strugglin with some topics of html and css.

i dont get when someone uses multiple classes for modify a design aspect (i know that it’s very stupid but just dont get it) i´ll try to put an image to put an example of it

[this](me marea)

The type of selector you are referring to is called a, combinator. It’s purpose is to combine classes into a single selector rule.

Relate this to inheritance in that the following applies,

.a .b .c .d {

}

The element with class ‘a’ is the parent element, and any elements nested in ‘a’ with class ‘b’ are selected then any elements with class ‘c’ inside those elements are selected and any elements with class ‘d’ inside those elements are what are finally selected.

4 Likes

Hi, there!

So, as you gain more experience in writing HTML, using stylesheets, and creating your own naming conventions, the selectors you see being used in other projects or by other people may seem confusing.

I am not sure what CSS lesson (if it was from a lesson) your image is referring to, or if you just pulled it from somewhere else, but consider looking at the header of a website. To the left you typically have the organization’s logo with a navigational list to the right.

I will create HTML based on the CSS from the image you provided.

<header class="header">
  <div class="logo">
    <img src="" alt="">
  </div>
  <ul class="nav-links">
    <li>
      <a>Nav 1</a>
    </li>
    <li>
      <a>Nav 2</a>
    </li>
    <li>
      <a>Nav 3</a>
    </li>
  </ul>
</header>

Now looking at the CSS, the creator is using higher specificity by creating a combinator. For example, let us say that somewhere else on the webpage, there is another <div> with the logo class, but you want both of them to look different or only one of them to have a transition. By creating…

.header .logo img

The creator is targeting the logo just within the header. Are there better ways of going about this? Yes. But you will find that people do what they want and you will need to be able to read and follow along.

On the bright side, once you get used to reading really long and weird selectors and combinators, it all starts to make sense!

3 Likes

Thank you very much :face_holding_back_tears: :grimacing:, this is a youtube’s tutorial to make a responsive nav bar…