What is difference between " .subtitle {} " & " h2[class=subtitle] "?-CodePudding

I just started learning HTML & CSS recently, have many doubts this is one of it

Can anyone please explain if i have to give class to every h2 i have in my code to make work " h2[class=subtitle] {} " then why shouldn't i simply mention " .subtitle {} "

So, please explain me where can i use h2[class=value] format & where can i use .subtitle

.subtitle {
  color: red;
}
/* or */
h2[class=subtitle] {
  color: red;
}

<h2 >About Me</h2>

<h2 >Services</h2>

<h2 >Contact Us</h2>

CodePudding user response：

.subtitle will apply to any element that has a class attribute that contains subtitle, regardless of its type or other entries in the class attribute. For example, .subtitle {} will match all of the following elements:

<h1 >Subtitle</h1>
<h2 >Subtitle</h2>
<p >Centered subtitle</p>

However, h2[class=subtitle] will only ever target <h2> elements that have a class attribute matching subtitle. It won't match if the classname has additional values, or if the element is not an <h2>, i.e.:

<h2 > <!-- matches -->
<h2 > <!-- won't match -->
<h1 > <!-- won't match -->

It's worth noting about specificity, however. h2[class=subtitle] is more specific than just .subtitle so any styles contained it will override those defined inside of .subtitle.

As a general rule, you should avoid writing [class=] selectors though, since they're very specific and make it difficult to reuse your stylesheet for other elements, and mean a refactor is necessary if your markup changes.

The square bracket notation is actually called the "attribute selector", and can be used for selecting elements based on their attributes and values. You can read more about it here. It's also worth noting that it's possible to use equality checks other than = inside of the attribute selector, as explained in the Syntax section of the MDN link above.

CodePudding user response：

[class=subtitle] target elements wich only have subtitle and class.

[]{
  color:red;
}

<div >subtitle</div>
<div >subtitle A</div>

If you don't need to specify that your element has only one class to apply your style, you should use .subtitle.

By adding h2 before, you only target h2 element with the subitle class applied, it's more specific.

[...] is usually used to select attribute like type in an input or custom data-...

input{
  border:3px solid black;
}
[type=text]{
  background-color:red;
}
input[type=text]{
  /*more specific : priority*/
  background-color:orange;
}

<input type="text">
<input type="email">

You can check selectors and combinators here (MDN).

CodePudding user response：

h2[class=subtitle] is more specific (google that...) and therefore overrules the less specific .subtitle selector (which would also apply to other tags which have that class).

Still, you would rather use h2.subtitle {...} than h2[class=subtitle] {...} to combine a class with a tag. h2[class=subtitle] {...} actually uses an attribute selector instead of the class selector.

CodePudding user response：

.classname can be used for any element you assign that class, whereas h2.classname is for the H2 elements which only contain that class assignment.

If you just want to make changes for every H2 element, just use

h2 {
  color: red;
}

Source: https://www.w3schools.com/tags/tag_hn.asp

CodePudding user response：

Using [] in a CSS selector matches attributes and their values.

h2[] matches all h2 with an attribute whose value is exactly subtitle whereas h2.subtitle matches all h2 tags which contains a "subtitle" class.

You can take a look at CSS attribute selector on MDN