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
– MightyPork, Commented Aug 7, 2013 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
– Joe Engle, Commented Aug 7, 2013 at 17:41
Can someone please help? Surely there is still a way to come to the solution I need.. — Joe Engle
– Joe Engle, Commented Aug 7, 2013 at 17:50

Community · Accepted Answer · 2017-05-23 10:31:51Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Aug 7, 2013 at 18:01

Mark Bubel

3754 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe Engle Over a year ago

correct. but that is how the application works. I'm trying to find a way around it

Praveen Over a year ago

@Mark +1 Missed it. my eyes didn't catch the $ and # :)

Mircea · Accepted Answer · 2013-08-07 18:07:03Z

0

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

answered Aug 7, 2013 at 18:07

Mircea

11.7k26 gold badges67 silver badges98 bronze badges

Comments

Praveen · Accepted Answer · 2013-08-07 18:08:07Z

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 7, 2013 at 18:08

answered Aug 7, 2013 at 18:01

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

Joe Engle Over a year ago

how would I apply this to the css i have?

Robbie JW · Accepted Answer · 2013-08-07 18:08:54Z

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 7, 2013 at 18:08

Robbie JW

7391 gold badge9 silver badges22 bronze badges

4 Comments

Joe Engle Over a year ago

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...

Robbie JW Over a year ago

Sorry, I must have misunderstood. I thought you wanted to target specifically that span, not all first spans 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.

Joe Engle Over a year ago

I'm targeting the span tag and wanting to apply on padding-right:20px; to that one. Please help if you can

Robbie JW Over a year ago

Just that one span tag? What's wrong with using an ID or a class selector? .PSLEVEL1GRIDODDROW div span.PSEDITBOX_DISPONLY

Collectives™ on Stack Overflow

Using CSS Selectors Incorrectly

4 Answers 4

2 Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related