Setting Font Size in Flexbox Child Container to a Different Value

[ahr aitch]

In the screen I am trying to design, I want one of the flexbox child containers to have a different font size than declared in the the class shown below.  In the screenshot where the name appears I want  font-size: 20px but putting that statement in the .name class descriptors has no effect.  Can I make just that area have the larger font size?  If so, how?

.flex-container > div
{
  background-color: #ffffff;
  justify-content: left;
  text-align: center;
  font-size: 9px;
}

.name
{
  display: inline-flex;
  width: 500px;
  height: 30px;
  justify-content: center;
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 3px;
  border-style: line; 
  border-width: 1px; 
  border-radius: 5px;
  padding-left: 5px;
  padding-top: 5px;
  background-color: #fff;
  text-align:center;

}
  

 

Edited September 18, 2023 by ahr aitch

[Ingolme]

It's a matter of specificity. Selectors that are more specific take priority and override rules of other selectors. This page describes which selectors are more specific: https://www.w3schools.com/css/css_specificity.asp

Assuming that your .name element is a child of .flex-container, then this selector should allow you to change the font size:

.flex-container .name

 

[ahr aitch]

Thank you.  I presumed that there was a hierarchy but had not seen the Specificity article and couldn't make a search argument that revealed it for me.

After reading the Specificity article, I used an in-line style to set font-size to 20px.  Worked fine!