How to use the CSS Selector

Here’s a video where you can see how I fire a dynamic event on a Contact Form 7 button using Developer Tools to find its classes:

Note: the video shows the older version of PixelYourSite Pro, but the CSS Selector process is virtually the same. We will update it soon.

If you are familiar with basic CSS rules, then you already know how to use this feature. If not, don’t worry, it is pretty simple and all our beginner users manage to do it with no hassle at all.

In CSS, selectors are patterns used to select the element(s) you want to style.

.class – Example: .intro – Selects all elements with class =”intro”

#id – Example: #firstname – Selects the element with id=”firstname”

tagname.class_name – Example: a.mylink – Selects the anchor element with class=”mylink”

tagname – Example: input – Selects the submit button of a form

tagname.class_name – Example: input.mysubmit – Selects the submit button of a form with class mysubmit[/table]

Use Your Borwser’s Developer Tools

The easiest way to identify the CSS Selectors is by using your browser’s Developer Tools.

Open the page where you want the event to fire and click Control+Shift+i. This will open your browser’s developer tools. Click on the small arrow in the top left corner.

Click on the element you want to select (your form button, for example). Developer Tools will show you all its CSS Selectors.

Example 1: Using Classes

In this example, you can use the button classes to fire the event: wpcf7-form-control wpcf7-submit

IMPORTANT: when you use the classes, you must add a dot in front of the first one and replace spaces with a dot. The result will look like this: .wpcf7-form-control.wpcf7-submit

This is what you have to use in PixelYourSite CSS Selector field.

Example 2: Using Attribute Value

What if you don’t want your event on every form button, and instead you’re looking to trigger it on a single button, the one with the text “ADD ME TO YOUR NEWSLETTER” (Remember that you can customize each form, so you can have different buttons, each with its own text, like “Contact me”, “Send me the eBook” etc.

Note that the tagname input has 2 attributes: type=”submit” and value=”ADD ME TO YOUR NEWSLETTER“. You can use each of them. If you use type=”submit” every button with this attribute will trigger the event. If you want to target only this particular ADD ME TO YOUR NEWSLETTER button you will use value=”ADD ME TO YOUR NEWSLETTER”. This is the formula: tagname.

In our case, it will be: input

Example 3: Using attribute value and classes

What if you want to be sure that the event will trigger only on the Contact Form 7 form with a button having the text ADD ME TO YOUR NEWSLETTER? It is simple, you will have to use a class together with the attribute. The result will be something like this:

input.wpcf7-submit

Note that you have to add a point before each class.