CODEWITHSUNDEEP
htmlcsswordpresscss-selectors
Declan McKenna
Declan McKenna

Reputation: 4900

How determine what CSS selector to use from my HTML source code?

The wordpress theme I've been using has been acting up so I'm trying my hand at editing my site using style sheets (I've 0 experience with html or CSS). I'm finding the googling process to discover the selector names I must use to edit each element within my site very time consuming so I've started looking at the source code to try and identify the selector I need.

For the example below I'm looking to change the signup form's button's background colour.

<div class="notif">
            <!-- Begin MailChimp Signup Form -->
            <div id="mc_embed_signup_appstage">
                <form action="http://HUDKingPro.us7.list-manage.com/subscribe/post?u=0c2c35acf6b36619d521176a9&id=8d4d76b2db" method="post" id="mc-embedded-subscribe-form_appstage" name="mc-embedded-subscribe-form" class="validate" target="_blank">
                                                    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL_appstage" placeholder="Enter your email address" required />
                            <input type="submit" value="Notify me !" name="subscribe" id="mc-embedded-subscribe_appstage" class="button" />

So far using the selectors I have identified I've come up with this but it doesn't appear to work, is there a methodology for identifying the CSS selector from the HTML source code?

#notif input {
background: #1A1A18;
}

Apologies if this is overly naive, I've an app to launch for next week so I've had insufficient time to develop a thorough understanding of CSS.

Upvotes: 0

Views: 305

Answers (2)

designtocode
designtocode

Reputation: 2245

Have you tried to use the class the button has? i.e. .button

So it will be:

.notif .button {
    background: #1A1A18;
}

Your div has <div class="notif"> therefore you're CSS is invalid with the # You use . for classes and # for id's.

Edit

It's taking this stylesheet http://hudkingpro.com/wp-content/themes/apptamin-a-hor/yourstyles-example4.css

Edit the background colours by line 76 or:

This is the class or input you want to edit:

.notif input#mc-embedded-subscribe_appstage{
    background: #1A1A18 !important;
}

Add the above to the Appearance - Editor.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324740

# is for IDs, whereas you have class="notif". Additionally, without further restriction it will affect the email input as well as the submit button.

So try .notif input[type=submit]

Upvotes: 0

Related Questions