Survey form - FCC Meeting Form

Here’s my second project. A survey form; sort of.

Feel free to dismantle it piece by piece. :sweat_smile:

PS: I thank you in advance for taking your valuable time to write a sentence or two to improve my learning experience. Really appreciated.

Hi there
Would recomend to
check out this lesson

especially this part
Note that in your CSS style element, class names start with a period.
or to say it else
To select elements with a specific class, write a period (.) character, followed by the class name.

1 Like

How can I select a particular element within a class.
For example:

.typing, label {
  text-transform: uppercase;

This is putting all the labels in uppercase, even those that don’t belong to a class of typing. What am I doing wrong?
That’s why I had to select every label with a specific for. :stuck_out_tongue_closed_eyes:

And if I put

.typing label {
  text-transform: uppercase;

Only problem with this part is that the checkboxes and radios have also labels, and if I add the .typing class to their parents element, it also transforms them. I think the problem I have is a markup problem, not css.
I tried using nth of child, and n+5, but didn’t work.

If you want to style different elements inside the same thing
You can use a seperate ID for them in your html

1 Like

Excellent. I’ll try that. I already have an id for each.

Form looks good @germanbobadilla. Something to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address.

To select a specific element within a class or id, use the > sign. So

.typing > label {}

will select all labels within the class typing.

1 Like

Thank you!
I think it’s a markup problem, because I did that and it selected the labels that weren’t direct children of Typing, and it uppercased its grandchildren. Weird.