How do I write the correct css selector for a data-qe-id?

Question

How do I write the correct css selector for a data-qe-id?

<h2 data-qe-id="form-title" class="ctct-form-header">Sign up for updates!</h2>
<p data-qe-id="form-description" class="ctct-form-text">Get news from us in your inbox.</p>

This is specifically for modifying a Constant Contact email sign up box.

Answer 1

You could use

h2[data-qe-id="form-title"] {
    color: red;
}

Using square brackets, you can refer to attributes and their values of any given DOM element.

Answer 2

You an attribute selector. Like this:

[data-qe-id] {
    color: red;
}

or attribute with specific value...

[data-qe-id="form-title"] {
    color: red;
}

or attribute with a value that starts with a certain string...

[data-qe-id^="form"] {
    color: red;
}

Answer 3

Use the selector then the data-qe-id:

    #ctct_form_0 [data-qe-id="form-description"]{
           color: red;}