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


Tags: html,css,wordpress,css-selectors

Problem :

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.



Solution :

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.


    CSS Howto..

    How to add spacing in between
    [duplicate]

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    Responsive website - how to debug a non-responding responsive css?

    How to write function in css

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    How can I make a border wrap around a group of pictures?

    How to fixed image on every screen resolution?

    How to Troubleshoot CSS?

    How to put space between figure in image?

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    How to handle this CSS mouse hover issue?

    How to use external css file to style a javafx application

    how to replicate pinterest.com's absolute div stacking layout [closed]

    how to remove space from html using bootstrap

    using jquery show/hide doesn't keep css in div

    How to set z-index for a shadow (CSS)

    How to add css to 1 element when hiding another?.. Jquery

    how to flip the div using css?

    javascript - how to get date locale to work?

    Codeigniter--add “active” css class to link, how to?

    How to fill a QTextBrowser with a single table in Qt?

    asp .net: how to change css on span tag in c#

    How to apply effects to a unicode character in CSS? [closed]

    How to get the CSS left, top, width, height from coords?

    How to get an li to expand to fit thumbnail content?

    How do I vertically center align a position:relative element

    CSS - Absolute position , how to ignore left and top of parent

    How to apply css to iframe content? [closed]

    how to create a css attribute swapper between two elements?

    How do I set these li elements under eachother?