How do I style dynamic text that is given by WordPress Advanced Custom Fields?-CodePudding

I hope you are all having a wonderful time during this day of Tuesday!

I have ran into a wall when styling components for an upcoming website. Website itself is made using shortcodes and then styled appropriately using CSS classes, however -

I have been trying to find a way how to style one specific section, and that is text that is provided by ACF as a template.

How can I target and style that specific text, without breaking the style that has already been given.

Can I somehow add styling to it without heavy manipulation of SCSS ?

This is the place I am talking about... Thank you in advance!

CodePudding user response：

You can font styles for its parent

Here's an example

.info-col {
  font-size: 16px;
  color: red;
  background: #e8e8e8;
  text-align: center;
  padding: 13px 0 0;
}

.info-col #test {
  background: white;
  color: #333;
  font-style: italic;
  text-align: left;
}

.info-col #test:nth-of-type(1) {
  margin-top: 13px;
}

<div class="info-col">
Rank
<div id="test">#1</div>
<div id="test">#2</div>
<div id="test">#3</div>
<div id="test">#4</div>
<div id="test">#5</div>
<div id="test">#6</div>
<div id="test">#7</div>
<div id="test">#8</div>
<div id="test">#9</div>
<div id="test">#10</div>
</div>