1

In a larger application, we'd like to shrink many elements of a single form quickpost-form

 <div id="qp-form">

There are several elements of the form that need to have smaller font. For example, text, input, input-group, textarea. At first I tried this .css:

#qp-form label, text, input, input-group, textarea

This works, but actually changed the sizes of these fields across forms. Realized that the comma foregoes inheritance, so instead tried the following based on this answer.

#qp-form > label, #qp-form > text, #qp-form > input

But this did not correctly change the font-sizes (they were not applied).

What is the most succinct/typical way to change various inputs across a single form? I've also tried the following:

.qp-form label text input input-group select textarea
Adam Hughes
  • 12,232
  • 8
  • 65
  • 106
  • The comma separated rule you posted *could* work, but it depends on your HTML which you didn't post. Please edit your question to include a [mcve] – j08691 Oct 15 '20 at 18:20
  • As @chazsolo supposes in that answer, `#qp-form > label` only affects `label` when it is a direct, immediate _child_ of `#qp-form`. If your structure has anything like `
    ...
    ... (etc)` then _label_ is a _descendent_ but not a _child_ of `#qp-form`. A child selector uses `>` as `#qp-form > label` but a _descendent_ selector uses a space like `#qp-form label`
     – Stephen P Oct 15 '20 at 18:41
  • What are `text` and `#qp-form > text` in your CSS (?) There is no HTML element ``. – Rounin - Standing with Ukraine Oct 15 '20 at 19:25
  • Thank you @Rounin - I was trying to reference ` – Adam Hughes Oct 15 '20 at 20:26
  • 1
    No worries. If you want to select `` then the CSS syntax you need is `input[type="text"]`. (This is called _attribute selection_). – Rounin - Standing with Ukraine Oct 15 '20 at 21:21

1 Answers1

3

Without knowing your HTML structure I can only assume that the elements you are targeting are not direct descendants of #qp-form which is why your third example with the child combinator didn't work.

You need to preface each selector with #qp-form and only use spaces to separate the elements (descendant combinator), further separating each group with a comma:

#qp-form label,
#qp-form input,
#qp-form textarea {
  /* styles */
}
chazsolo
  • 7,429
  • 1
  • 18
  • 42