Nested resources in css with :after and :before

Question

I need to differentiate on between finish / start date. So I would like on datepicker CSS rules applied to one text-field and others to the other.

<input id="mzti-start-date"  type="text" name="start_date" class="datepicker mzti-dp-width mzti-field-height" placeholder="Start date">
<input id="mzti-finish-date" type="text" name="finish_date" class="datepicker mzti-dp-width mzti-field-height" placeholder="End date">

And here were my CSS files:

#mzti-finish-date.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;  // I made a change here 
}

#mzti-finish-date .datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;  // I made a change here 
}

Unfortunately I was not able to figure out why the rules under mzti-finish-date do not apply to the finish-date box.

You have an extra space on #mzti-finish-date .datepicker:after before the .datepicker. — haim770
– haim770, Commented Aug 19, 2013 at 6:35

Brigand · Accepted Answer · 2013-08-19 06:35:46Z

1

There's a space in your second selector.

#mzti-finish-date .datepicker:after

Should be

#mzti-finish-date.datepicker:after

But really should be (because IDs are unique)

#mzti-finish-date:after

answered Aug 19, 2013 at 6:35

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

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

2 Comments

Jackie Chan Over a year ago

It's not going to work because a datepicker is added on the bottom of the document, hence nesting doesn't work :(

Brigand Over a year ago

I'm not sure what you mean. The order of elements is completely unrelated.

Collectives™ on Stack Overflow

Nested resources in css with :after and :before

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related