Question 182636 in CSS Question posted in
Some basic documentation can be found here.

Css – how to select the two different class inside a parent class?

I’m trying to select the class .signup-choose-subtitle and .signup-choose-list li in my parent class of signup-choose-card-content to apply the font-family.

This is my code in css

.ja_jp 
.signup-container 
.signup-content 
.signup-choose-card-content 
.signup-choose-subtitle 
.signup-choose-list li 
{   
    font-family: "M+1C", Roboto, sans-serif; 
}

and code in the html

<div class="signup-choose-card-content">
   <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
   <p class="signup-choose-text-highlight">Lite</p>

   <ul class="signup-choose-list">
       <li translate="">No identity verification required</li>
       <li translate="">Over 2,000 games</li>
   </ul>
</div>

My goal is to overwrite the existing font-family: "Bahnschrift", Roboto, sans-serif; to font-family: "M+1C", Roboto, sans-serif; like this image:

[1]: https://i.stack.imgur.com/5qAfM.png

Tags:

2

Answers


  1. 0

    Option 1

    Target specific elements that are nested within the .signup-choose-card-content element.

    .signup-choose-card-content .signup-choose-subtitle,
.signup-choose-card-content .signup-choose-list li {
  font-family: "M+1C", Roboto, sans-serif;
}

    See the snippet below.

    .signup-choose-card-content .signup-choose-subtitle,
.signup-choose-card-content .signup-choose-list li {
  font-family: "M+1C", Roboto, sans-serif;
  color: red;
}
    <div class="signup-choose-card-content">
  <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
  <p class="signup-choose-text-highlight">Lite</p>

  <ul class="signup-choose-list">
    <li translate="">No identity verification required</li>
    <li translate="">Over 2,000 games</li>
  </ul>
</div>

    Option 2

    Target all elements within the .signup-choose-card-content element by using the direct child selector (i.e., >) except paragraphs with the class signup-choose-text-highlight.

    .signup-choose-card-content > :not(p.signup-choose-text-highlight) {
  font-family: "M+1C", Roboto, sans-serif;
}

    See the snippet below.

    .signup-choose-card-content > :not(p.signup-choose-text-highlight) {
  font-family: "M+1C", Roboto, sans-serif;
  color: red;
}
    <div class="signup-choose-card-content">
  <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
  <p class="signup-choose-text-highlight">Lite</p>

  <ul class="signup-choose-list">
    <li translate="">No identity verification required</li>
    <li translate="">Over 2,000 games</li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    According to your description you would probably want it this way (I added the border-property for better visibility druing development):

    .signup-choose-card-content > .signup-choose-list li,
.signup-choose-card-content > .signup-choose-subtitle {
        border: 4px solid red ;

}

    With the child combinator you can select direct children of classes/elements etc, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

    The child combinator (>) is placed between two CSS selectors.

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

Back To Top
Search