WordPress.org

Ready to get started?Download WordPress

Forums

Newsletter Sign-Up
[resolved] Any way to add a class to the p tags in the form? (3 posts)

  1. laughhearty
    Member
    Posted 1 year ago #

    I'd like to add a class to the <p>'s that are surrounding the label/inputs and the submit. Any way to do this with a filter in the functions.php?

    Thanks!

    http://wordpress.org/extend/plugins/newsletter-sign-up/

  2. tnoguchi
    Member
    Posted 1 year ago #

    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: http://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

  3. laughhearty
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic