Как предоставить различный контент для каждого td в таблице

Question

Я изо всех сил стараюсь дать различный контент (значки в моем случае) для каждого <td> с использованием метода nth-chid().

Если я добавляю это правило CSS, я вижу на каждом <td> один тип значка:

.help-block .css-context-explorer-orientation-widget td:before { 
    font-family: icons; 
    content: "\e04f"; 
    position: absolute; 
} 

На данном этапе, я хочу, чтобы переписать правила выше, но я не вижу никаких изменений, все иконки одинаковы.

.help-block .css-context-explorer-orientation-widget td:before:nth-child(1) { 
    font-family: icons; 
    content: "\e04e"!important; 
} 

Если я даю !important правило, не должны переписывать правила выше?

PS: Как переписать правило, когда я получу второй ряд?

Answer 1

Проблема здесь не с important.

Ваш селектор ошибочен. :before следует использовать в конце селектора.

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 

Сначала выберите первый дочерний элемент, а затем использовать before на нем.

Answer 2

Необходимо использовать псевдокласс nth-child перед псевдоэлементом ::before.

Ваш код имеет логику Select the first before pseudo-element of the parent Псевдоэлементы являются поддельными, а не частью DOM, поэтому они не вычисляются с использованием nth-child.

Ниже код делает логику Select the before pseudo-element of td which is first child of the parent

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 
    font-family: icons; 
    content: "\e04e"; 
} 

Answer 3

Просто применять: п-й ребенок раньше: перед тем, как

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 
    font-family: icons; 
    content: "\e04e"; 
}