0

i have input called it-Output Url

<input id="id-Output Url"

i cannot select this with css tried 

input[id='id-Output Url']{
    font-weight: bold!important;
    }
input#id-Output.Url{
    font-weight: bold!important;
    }

none of these seem to work and actually select this id

biillitil
  • 141
  • 1
  • 12
  • 1
    An attribute selector should work fine, despite the invalid id https://jsfiddle.net/xq48s3tk/. Technically, you could also escape the space: https://jsfiddle.net/xq48s3tk/1/ – Turnip May 04 '20 at 21:35
  • @Turnip Nice catch! – A. Meshu May 04 '20 at 21:37
  • Does this answer your question? [handling css id and classes with spaces](https://stackoverflow.com/questions/9285451/handling-css-id-and-classes-with-spaces) – A. Meshu May 04 '20 at 21:38

2 Answers2

0

You can simply use classes instead of ids or you can remove the space and select the element the usual way. You specify classes in css with . and you can chain them together when they are separated by spaces.

Simply modify:

Solution 1

<input class="id-Output Url" ...
input.id-Output.Url { ....

Solution 2

<input id="id-Output-Url" ...
input#id-Output-Url { ....
Henry Le Berre
  • 910
  • 9
  • 18
0

First of all, please search your question before posting. You can find your answer here

Secondly next time you ask a question, if you cannot find it while you search it, would be great if you would try to create at least a working example (using code sample).

In the third row, you should really take in consideration if using !important is a good ideea. You can read more about this topic here.

Also would be better if you use more classes and less id's while working with css. id's should be used only when you are really sure you want some code something only on a single element from all your code.

Avoiding using spaces in your id's and classes would also be a great ideea so you avoid this kind of problems in the future.

Edit: here is a working example of your example since you said that is not working :)

input#id-Output\ Url{
    font-weight: bold!important;
    }
<input id="id-Output Url" />
Berci
  • 2,876
  • 1
  • 18
  • 28
  • I updated my response. From what I can see is working. So this is why I said you need a working example first of all so we can see more clear what is actually not working :) – Berci May 04 '20 at 21:42