Using CSS Selectors Incorrectly

Question

I have some code that looks like below. I am using css to try and assign the span tag with id="TL_QUANTITY$0" with padding-right of 20px. But I'm using the CSS selectors incorrectly. Does anyone know how I would change the end of the css to assign that span tag with that padding by not directly calling that id?

Here is the HTML:

    <td id="tdTL_PAYABLE_TIME$0#2" class="PSLEVEL1GRIDODDROW" width="127" align="left" style="">
    <td id="tdTL_PAYABLE_TIME$0#3" class="PSLEVEL1GRIDODDROW" width="152" align="left" style="">
    <td id="tdTL_PAYABLE_TIME$0#5" class="PSLEVEL1GRIDODDROW" width="105" align="left" style="">
    <td id="tdTL_PAYABLE_TIME$0#6" class="PSLEVEL1GRIDODDROW" align="right" style="">

<div id="win10divTL_QUANTITY$0" style="width:78px;">
    <span id="TL_QUANTITY$0" class="PSEDITBOX_DISPONLY">8.00</span></div></td>

And here is the CSS:

#lbContent #comp_zPNCComp .PSLEVEL1GRIDODDROW, #lbContent #comp_zPNCComp .PSLEVEL2GRIDODDROW, #lbContent #comp_zPNCComp .PSLEVEL3GRIDODDROW, #lbContent #comp_zPNCComp .PSSRCHRESULTSODDROW div:nth-child(1) span:nth-child(1) {
    padding-right:20px;
}

I know this much of it is correct, I just am messing up where I try calling the children:

#lbContent #comp_zPNCComp .PSLEVEL1GRIDODDROW, #lbContent #comp_zPNCComp .PSLEVEL2GRIDODDROW, #lbContent #comp_zPNCComp .PSLEVEL3GRIDODDROW, #lbContent #comp_zPNCComp .PSSRCHRESULTSODDROW

This code is just AWFUL. Only a wysiwyg editor can make such a thing. Why don't you use something readable as classes and IDs, and stop combining inline and external styles? — MightyPork, Aug 07 '13 at 17:39
I did not build the code. It was already designed like this. Can you please help me find a solution to the question. — Joe Engle, Aug 07 '13 at 17:41
Can someone please help? Surely there is still a way to come to the solution I need.. — Joe Engle, Aug 07 '13 at 17:50

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

I think the real problem is with the id names for the elements. I may be wrong, but I don't think the use of $ is allowed in CSS to specify an element's id name.

See here: What are valid values for the id attribute in HTML?

edited May 23 '17 at 10:31

Community

1
1

answered Aug 07 '13 at 18:01

Mark Bubel

365
4
14

correct. but that is how the application works. I'm trying to find a way around it – Joe Engle Aug 07 '13 at 18:03
@Mark +1 Missed it. my eyes didn't catch the `$ and #` :) – Praveen Aug 07 '13 at 18:06

Praveen · Answer 2 · 2013-08-07T18:08:07.297

0

First thing, IDs are meant for unique selector

whereas class is for a group of elements.

Update: First I missed to catch $ and #, which are not allowed.

Option1: ID selector

#ElementId {
  padding-right: 20px;
}

Option2: Using your div's ID or class

#classID {
  padding-right: 20px;
}

Option3: Using Pseudo selector like JSFiddle, in your case you can try something similar to this.

div:last-child span{
  padding-right: 20px;
}

Still more options available.

edited Aug 07 '13 at 18:08

answered Aug 07 '13 at 18:01

Praveen

50,562
29
125
152

how would I apply this to the css i have? – Joe Engle Aug 07 '13 at 18:28

score 0 · Answer 3 · answered Aug 07 '13 at 18:07

0

Your ID element selector is invalid "id="tdTL_PAYABLE_TIME$0#2". "$" is not allowed in ID

answered Aug 07 '13 at 18:07

Mircea

10,133
21
58
88

score 0 · Answer 4 · answered Aug 07 '13 at 18:08

0

Having the hashes (#) in your ID names will cause errors, for example:

#tdTL_PAYABLE_TIME$0#6 says any element with ID 'tdTL_PAYABLE_TIME$0' and also ID '6'.

You could try:

.PSSRCHRESULTSODDROW div[style="width:78px;"]:nth-child(1) span:nth-child(1)

answered Aug 07 '13 at 18:08

Robbie JW

580
1
7
19

Where are you getting the width:78 from? I need to assign the innermost tag which is the span tag a padding-right of 20px... – Joe Engle Aug 07 '13 at 18:13
Sorry, I must have misunderstood. I thought you wanted to target specifically that `span`, not all first `span`s in the first `div` of a `td`. I was taking the `width:78px;` attribute selector from the div above it (ID `win10divTL_QUANTITY$0`). **Edit:** You might consider using the `:first-of-type` pseudo-selector too. – Robbie JW Aug 07 '13 at 18:22
I'm targeting the span tag and wanting to apply on padding-right:20px; to that one. Please help if you can – Joe Engle Aug 07 '13 at 18:29
Just that one `span` tag? What's wrong with using an ID or a class selector? `.PSLEVEL1GRIDODDROW div span.PSEDITBOX_DISPONLY` – Robbie JW Aug 07 '13 at 18:41

Using CSS Selectors Incorrectly

4 Answers4