How to get a subelement with css selector?

Question

I use Nightwatch.js to test a website. Now I have this html code:

<div class="form-group">
    <div class="col-sm-6">
        <input id="inputTireManufacturer">
        </input>
    </div>
</div>

I need to select the input node. But there are other nodes with id="inputTireManufacturer". This means I need a selector that can select an element with class="form-group", that contains an element with class="col-sm-6" that contains an element with id="inputTireManufacturer". Something like this: .form-group:.col-sm-6:#inputTireManufacturer But this does not work. How can I do it?

But there are other nodes with id="inputTireManufacturer". — Then you are not working with HTML. An id **must be unique** in a document. Use a class instead. — Quentin, Jul 03 '15 at 10:21
I used opera to view the html code of the website and id="inputTireManufacturer" appears several times in different nodes. — Garrarufa, Jul 03 '15 at 10:25
however... it works. I just cannot test it. is there a way to get a subelement? — Garrarufa, Jul 03 '15 at 10:37

score 2 · Answer 1 · answered Jul 03 '15 at 10:24

This has syntax errors in it:

.form-group:.col-sm-6:#inputTireManufacturer

Fixing them (removing the colons):

.form-group.col-sm-6#inputTireManufacturer

This means

Selects any element with a class attribute that contains the word form-group, a class attribute that contains the word col-sm-6, and an id attribute that equals inputTireManufacturer.

You need descendant combinators:

.form-group .col-sm-6 #inputTireManufacturer

Selects any element with an id attribute that equals inputTireManufacturer that is a descendant of any element with a class attribute that contains the word col-sm-6 that is a descendant of any element with a class attribute that contains the word form-group.

However:

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

If you want to mark an element as part of a group of similar elements, then use a class, that is what class is for.

<div class="form-group">
    <div class="col-sm-6">
        <input class="inputTireManufacturer">
        </input>
    </div>
</div>

.form-group .col-sm-6 #inputTireManufacturer

Selects any element with a class attribute that contains the word inputTireManufacturer that is a descendant of any element with a class attribute that contains the word col-sm-6 that is a descendant of any element with a class attribute that contains the word form-group.

How to get a subelement with css selector?

1 Answers1