Formatting with CSS a specific label element

Question

I have the following html

and I am trying to format the styling of the text label "I CONFIRM THAT I AM A PROFESSIONAL ADVISER AND I HAVE READ THE ABOVE INFORMATION AND WISH TO PROCEED. "

Is the below correct?

.rmq-1aed09a9 div:nth-child(4)>div label {
  font-weight: bold;
  background: yellow;
  font-size: 12px;
}

<div class="rmq-1aed09a9" data-radium="true" style="width: 100%; margin: 0px auto;">
  <form novalidate="">
    <div data-radium="true">
      <div data-radium="true" style="display: flex; flex-direction: column; width: 100%;">
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Email*" name="email" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Full Name*" name="name" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Company Name" name="company" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="margin: 10px 0px;"><label data-radium="true" style="margin-bottom: 7px; display: block; font-weight: 300; font-family: Heebo; color: rgb(0, 0, 0); font-size: 16px;">I CONFIRM THAT I AM A PROFESSIONAL ADVISER AND I HAVE READ THE ABOVE INFORMATION AND WISH TO PROCEED. </label></div>
        </div>
        <div data-radium="true">
          <button class="psButtons" name="BUTTON_1" type="submit" data-radium="true" style="opacity: 1; background-color: rgb(0, 92, 171); color: rgb(255, 255, 255); border-radius: 0px; border-color: rgb(0, 92, 171); font-family: Heebo; font-weight: 400; font-size: 15px; text-align: center; text-transform: none; text-decoration: none; transition: opacity 0.3s ease 0s; width: 100%; letter-spacing: 0.1em; padding: 10px 15px; margin-top: 10px;">I AGREE</button>
          <div data-radium="true">
            <p data-radium="true" style="font-family: Heebo; font-weight: 400; text-align: left; font-size: 12px;">

              <p>By entering this section of the website, you are consenting to the use of the website cookies. For more information view our <a href="https://www.tamint.com/privacy-policy/" target="_blank" rel="noopener">cookie policy</a>.</p>
            </p>
          </div>
        </div>
      </div>

    </div>
  </form>
</div>

"Correct" in what sense?

David Thomas
– David Thomas

2022-11-30 13:26:02 +00:00
Commented Nov 30, 2022 at 13:26 — David Thomas
– David Thomas, Commented Nov 30, 2022 at 13:26
I don't think anyone understands your question

Noah
– Noah

2022-11-30 13:57:17 +00:00
Commented Nov 30, 2022 at 13:57 — Noah
– Noah, Commented Nov 30, 2022 at 13:57

Kameron · Accepted Answer · 2022-11-30 13:59:30Z

Your inline styles are overriding your CSS font-weight and font-size declarations because inline styles take precedence in the DOM. You can either remove the inline styles or use the !important flag to override them.

.rmq-1aed09a9 div:nth-child(4)>div label {
  font-weight: bold !important;
  background: yellow;
  font-size: 12px !important;
}

<div class="rmq-1aed09a9" data-radium="true" style="width: 100%; margin: 0px auto;">
  <form novalidate="">
    <div data-radium="true">
      <div data-radium="true" style="display: flex; flex-direction: column; width: 100%;">
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Email*" name="email" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Full Name*" name="name" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="position: relative;"><input class="psFormFields" type="text" placeholder="Company Name" name="company" data-radium="true" value="" style="padding: 10px 15px; background: rgb(255, 255, 255); border-color: rgb(102, 102, 102); border-radius: 0px; color: rgb(0, 0, 0); font-family: Heebo; font-weight: 400; outline: none; transition: border-color 0.3s ease 0s; box-sizing: border-box; width: 100%; font-size: 13.5px; margin-top: 10px;"></div>
        </div>
        <div data-radium="true" style="position: relative;">
          <div data-radium="true" style="margin: 10px 0px;"><label data-radium="true" style="margin-bottom: 7px; display: block; font-weight: 300; font-family: Heebo; color: rgb(0, 0, 0); font-size: 16px;">I CONFIRM THAT I AM A PROFESSIONAL ADVISER AND I HAVE READ THE ABOVE INFORMATION AND WISH TO PROCEED. </label></div>
        </div>
        <div data-radium="true">
          <button class="psButtons" name="BUTTON_1" type="submit" data-radium="true" style="opacity: 1; background-color: rgb(0, 92, 171); color: rgb(255, 255, 255); border-radius: 0px; border-color: rgb(0, 92, 171); font-family: Heebo; font-weight: 400; font-size: 15px; text-align: center; text-transform: none; text-decoration: none; transition: opacity 0.3s ease 0s; width: 100%; letter-spacing: 0.1em; padding: 10px 15px; margin-top: 10px;">I AGREE</button>
          <div data-radium="true">
            <p data-radium="true" style="font-family: Heebo; text-align: left;">
              By entering this section of the website, you are consenting to the use of the website cookies. For more information view our <a href="https://www.tamint.com/privacy-policy/" target="_blank" rel="noopener">cookie policy</a>.</p>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

also your HTML was invalid due to a nested <p> in a <p>.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

~ 9.3.1 Paragraphs: the P element

Collectives™ on Stack Overflow

Formatting with CSS a specific label element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related