Question 167430 in Html Question posted in
Some basic documentation can be found here.

Html – CSS rule is applied without the class, why?

I define the CSS rule:

.info-specs h2, h3, h4, h5 {
    font-size: 1.5em;
    text-transform: none;
}

This should only apply to h5 within an element with class "info-specs". However, after inspecting, I find other h5 element is also using this rule. Why?
Below is a sample:

.info-specs h2, h3, h4, h5 {
    font-size:5em;
    text-transform: none;
}
<h5>mytest </h5>
Tags:

6

Answers


  1. 0

    You’re applying class to .info-specs h2 and to h3 and to h4 and to h5.

    It’s not equal to .info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 where all H’s within .info-specs would be targeted, but not H6 for instance.

    .info-specs h2, h3, h4, h5 {
font-size:5em;
text-transform: none;
}
// any h2 following an .info-specs class will be targeted.
// regular h2 won't be affected by the rule.
// regular h3, h4, h5 *will* be affected by the rule, even outside the .info-specs class.

.info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 {
font-size:5em;
text-transform: none;
}
// h2, h3, h4, h5 *will* be affected by the rule when placed within the scope of .info-specs class
// regular h2, h3, h4, h5 won't be affected by the rule.

    Read more about grouping_selector and the following paragraph about ‘combinators’.

    Login or Signup to reply.
  2. 0

    You have applied to CSS for all classes and elements mentioned. This is the way you can say that the following rule should apply to chosen classes and elements.

    if you want to use your CSS inside a particular class you just need to use the ">" selector in CSS.

    try this:

    .info-specs>h5{
    font-size:5em;
    text-transform: none;
}

<h5> Hello World</h5>

    https://www.w3schools.com/cssref/css_selectors.php

    Login or Signup to reply.
  3. 0

    Your code simply means you applying css to .info-specs h2, h3, h4 and h5 and not to the .info-specs h5, but the code you provided do not contain other heading tags other than h5 or maybe you did not provided the full code, its unclear what you want to achieve but the problem will be fixed putting h5 tag at first,

    .info-specs h5, h3, h4, h2 {
    font-size:5em;
    text-transform: none;
}
    <h5>mytest</h5>
    Login or Signup to reply.
  4. 0

    The CSS interpreter of your browser is going to look for any h3, h4 and h5 elements and only for h2 it’s going to look if it is inside a .info-specs. The comma or grouping selector treats everything seperated by the comma as separate selections.

    Possible solutions to your issue are:

    /* These select for any h2, h3, h4 and h5 within .info-specs */

.info-specs h2,
.info-specs h3,
.info-specs h4,
.info-specs h5
{
  text-decoration: underline;
}

/* These select for ant h2, h3, h4 and h5 that are direct chldren of .info-specs */
.info-specs > h2,
.info-specs > h3,
.info-specs > h4,
.info-specs > h5
{
  color: red;
}
    <div class="info-specs">
  <p>In this example the headings within inf-specs will all be underlined but only the headings that are direct children of info-specs will be coloured red.</p>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <div>
    <h3>Heading 3 in another div</h3>
  </div>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
</div>
    Login or Signup to reply.
  5. 0

    :where psuedo-class can be used in this case

    DOC

    :where(h2,h3,h4,h5).info-specs{
    font-size:1em;
    text-transform: none;
    color:green;
}
    <h5 class='info-specs'>Original</h5>
<h5>mytest </h5>
    Login or Signup to reply.
  6. 0

    To achieve the desired behavior of applying the styles only to h5 elements within an element with the "info-specs" class, you need to explicitly specify the class selector for each element. Here’s the corrected CSS rule:

    .info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 {
    font-size: 1.5em;
    text-transform: none;
}

    With this updated rule, the styles will only be applied to h5 elements that are descendants of an element with the "info-specs" class, and not to other h5 elements that dont have that class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search