I don't know how to select h1 with css selector in this html…which one is the right ClassName for div?

66
January 01, 2020, at 10:30 PM

I have this html :

 <div class="d-flex align-items-center flex-column flex-sm-row justify-content-between w-100 pt-10 pb-15">
   <h1 class="product-title mb-0 pl-10 order-2 order-sm-1 ml-auto ml-sm-0" itemprop="name">
    Samsung Galexy A70
   </h1>
</div>

which one is true???

this selector??

div.d-flex align-items-center flex-column flex-sm-row justify-content-between w-100 pt-10 pb-15 h1{
}

or this one?

div.d-flex  h1{
}
Answer 1

Most likely what you want is just:

.product-title {
  // styles go here
}

When you separate CSS selector elements with a space, that is using a descendant selector. This means that a selector like this:

div.parent h1 {
  // styles go here
}

would target the <h1> element here:

<div class="parent">
  <h1>Hello!</h1>
</div>
Answer 2

Your first approach is wrong second one is good

Best is use class product-title on h1like

.product-title{color:red;}

or if your class in reusable then a tag as well like

h1.product-title{color:red;}

You can also select tag itself like

h1{color:red;}

All depend to your requirement

Read more about CSS selectors

Answer 3

It's pretty much verbose the first one until it works.

Consider this:

h1 is a direct son of your div because is inside of it, so at this point it could be much simpler in this way:

div h1

Or even better with BEM through it's class identifier

.main-container__main-title

Consider this example with a BEM approach

    <!DOCTYPE html> 
    <html> 
    <head> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width"> 
      <title>Example</title> 
      <style> 
        .main-container__main-title { 
          color: red; 
        } 
      </style> 
    </head> 
    <body> 
    <div class="main-container"> 
      <h1 class="main-container__main-title">Hola</h1> 
    </div> 
    </body> 
    </html>

Where...

  • My main container has an eloquent class
  • h1 that belongs as a son of your main container has a class with a similar name but at the end I have added __main-title to identify this element
READ ALSO
Mix-Blend mode doesn&#39;t work on custom cursor

Mix-Blend mode doesn't work on custom cursor

I would like to add a mix-blend-mode: difference to the inner cursor, but I can't get it to workI heard that the position: fixed applied to the cursor may cause the problem here

232
HTML, CSS, JavaScript modal and many pages

HTML, CSS, JavaScript modal and many pages

I have an HTML page that has a modal popup window on itThe page has Javascript and CSS and works fine

87
CSS Emotion is caching CSS despite variables

CSS Emotion is caching CSS despite variables

I'm using Emotion for CSS in a React projectIt's working correctly but I have one component that uses the css property with JS arguments and it seems Emotion is caching the CSS despite the variables changes

74
smooth transition on content change

smooth transition on content change

I have a DIV of unknown height with content that can be changed from a javascript eventWhen the content changes, the DIV resizes to fit the new content

108