I don't know how to select h1 with css selector in this html....which one is the right ClassName for div?
Question
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{
}
3 answers
solution1
2 2019-12-31 18:30:18
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>
solution2
0 2019-12-31 18:37:30
Your first approach is wrong second one is good
Best is use class product-title on h1 like
.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
solution3
0
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-titleto identify this element
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.