Stylus: Trying to apply a style to an ID and not to a class

[Jeannnnot]

• CHROME:
• W10:
• 1.5.3:

Hi i'm trying to apply a style to an ID and I don't know if it is possible.
I want to control the column width in a table so I found this code in the web page and the column ID is linkted
to WO_DET:cs_325_1:tb_WO_Realized_Process:ct_WO_Realized_Process_Description

<th id="WO_DET:cs_325_1:tb_WO_Realized_Process:ct_WO_Realized_Process_Description" class="TableCell TableHeader" style="width:240px;"><div style="display: inline-block;"><a id="aselectorct_WO_Realized_Process_Description" href="#" onclick="tableSortCol('ct_WO_Realized_Process_Description',event,'WO_DET','WO_DET:cs_325_1:tb_WO_Realized_Process');">Libellé</a></div></th>

So I tried to use # to refer to this ID and it doesn't work.

Any idea ?

[stonecrusher]

According to CSS rules you have to escape the colon with a backslash:

#WO_DET\:cs_325_1\:tb_WO_Realized_Process\:ct_WO_Realized_Process_Description {
    width: 540px !important;
}

[Jeannnnot]

Thanks. I have corrected as you showed me. But it still doesn't work.
In the original HTML code, the width is specified with the tag style :

style="width:240px;

So do you think I can overwrite it with the width that I would like with CSS and stylish or is it not possible?

[narcolepticinsomniac]

Simply escaping colons used to work IIRC, but it seems you have to use unicode for colons now:

#WO_DET\3a cs_325_1\3a tb_WO_Realized_Process\3a ct_WO_Realized_Process_Description

In the future, this repo is intended for bug reports or feature suggestions, not run-of-the-mill CSS questions. You can either ask those in the USO forum or in the correct channel in our Discord.

[stonecrusher]

Hmm strange, I remember the unicode workaround was only needed in the past for some IE incompatibilities. However, glad it works now.

BTW I wouldn't encourage anyone these days to go to the messed up USO forum anymore.
Stylus "official" help is on Discord or Disqus.

[narcolepticinsomniac]

Regular escaping probably does still work for some characters in some scenarios. OP says it didn't here, so I'll take their word for it because I don't feel like making a test case. Bottom line is, regular escaping doesn't always work like I could've sworn it used to, and unicode seems to always work cross-browser. I did test this example and it seemed to require unicode.

USO might be abandoned by the devs, but I still answer simple CSS questions there. It's still a help forum. Any of those options would be a reasonable place for CSS questions.

[stonecrusher]

Good to know, I'll try to remember that next time when I have issues with CSS selectors. With your example this is the second case already when simple escaping doesn't work.

Regarding USO... well, answering questions there is one thing, but sending people there another. However, no biggie.

[Jeannnnot]

Finaly it almost worked with this :

th[id="WO_DET:cs_325_1:tb_WO_Realized_Process:ct_WO_Realized_Process_Description"]

I verified it with the background color but id didn't affect the column width :
{ column-width: 500px; width: 500px; background: #0ff06afa; }

Is it because width is already fixed by the TAG style="width:240px;">
So is it possible to overwrite the width with CSS and Stylus?

[stonecrusher]

Overwrite inline properties by adding !important.

[Jeannnnot]

It works and it is wonderfull !
Thank you!