CODEWITHSUNDEEP
htmlcss
user3871
user3871

Reputation: 12718

How do you create different CSS for dynamically generated elements?

How do you generate different CSS for dynamically generated elements?

My issue is here: we have a date picker widget which has table th elements generated, with text-align: left. When it's left, the th's align left, but the right side >> squishes together. The opposite problem occurs when I align them right. What I need to do is apply align left to the first << and align right to the last >>. But these items are being generated dynamically. SCSS rules are being used.

th { text-align: left }

enter image description here

th {text-align: right }

enter image description here

Each piece of the date picker, the <<, June 2007, and >> are in different th within tr:

enter image description here

enter image description here

Upvotes: 0

Views: 82

Answers (2)

Joseph
Joseph

Reputation: 51

Another solution can be set text-align:center to all th elements. But its'n what you exactly want, maybe.

Upvotes: 0

ekuusela
ekuusela

Reputation: 5312

See the :first-child and :last-child pseudo-classes:

th:first-child { text-align: left; }
th:last-child { text-align: right; }

Upvotes: 5

Related Questions