Применить CSS только к одной сетке

Question

Я использую jqgrid 4.5.4.

Я пытаюсь применить некоторые CSS с помощью этого селектора

.ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}

но так как у меня несколько сеток, и я просто хочу применить этот CSS к сетке, я попробовал так:

#grid .ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}

но безуспешно.

Есть ли способ применить этот CSS только к одной или двум сеткам вместо всех сеток?

Answer 1

Селектор

#grid .ui-jqgrid tr.jqgrow td {...}

неверно, потому что .ui-jqgrid это external div относительно сетки. Правильно было бы как минимум следующее:

.ui-jqgrid #grid tr.jqgrow td {...}

см. Структуру div и таблиц jqGrid здесь .

Answer 2

Обоснованное предположение: вы нацеливаетесь на сетку с id="grid" и class="ui-jqgrid". Затем ваш CSS должен быть нацелен на #grid.ui-jqgrid tr.jqgrow td (без пробела между #grid и .ui-jqgrid).

Поскольку в настоящее время он нацелен на .ui-jqgrid, который будет child of #grid вместо элемента.

Итак, ваш код будет:

#grid.ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}