Viewing 2 replies - 1 through 2 (of 2 total)
  • I didn’t figure out a way to add classes to the p tags, but if you’re just trying to add them to be able to target them with css selectors, I suggest using ‘child’ pseudo classes: https://css-tricks.com/how-nth-child-works/

    For example in my scss code I’m targeting the name, email and submit inputs in the following way:

    // child pseudo classes give explicit style and positions to nsu form inputs and submit buttons
    .nsu-form {
    
    		p {
    			&:first-child { // p tag wrapping name input
    				position: relative;
    				width: 50%;
    				float: left;
    			}
    
    			&:nth-child(2){ // p tag wrapping email input
    				position: relative;
    				width: 50%;
    				float: right;
    			}
    
    			&:last-child { // p tag wrapping submit input
    				position: relative;
    				width: 50%;
    				float: right;
    			}
    
    		}

    Hope that this helps. If you don’t know scss conventions, basically the above is the same as p:first-child { } .. p:nth-child(2) {} .. etc

    Thread Starter Alicia St Rose

    (@laughhearty)

    Thank you, tnoguchi!
    I use child pseudo selectors quite often, but was unaware of nth-child.
    This rocks my day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Any way to add a class to the p tags in the form?’ is closed to new replies.