CODEWITHSUNDEEP
htmlcsscss-selectors
MontyHall
MontyHall

Reputation: 524

Remove comma of the last dd before every dt embeded using :after pseudo element

How can I use CSS to add a commas after description (dd) elements, except for the last one before each new description term? For example:

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>      <!-- No comma needed here -->
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>      <!-- No comma needed here -->
</dl>

Note: I'm looking for a solution that's independent from the number of dd elements preceding a dt.

Adding the comma afer each dd is simple:

dd:after
{
content:",\00a0";        /* A comma and a space after each description (dd) */
}

But this adds a comma after each dd that immediately precedes a dt as well. dd:last-child:after is obviously of no use here, unless there's some other CSS selector I'm unaware of.

Upvotes: 3

Views: 2070

Answers (4)

R. Schreurs
R. Schreurs

Reputation: 9085

Nowadays, you are allowed to group dt's together with their dd's.

In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.

(See HTML Living Standard; 4.4.9 The dl-element)

You can use this to force the last dd to be a :last-child.

Example:

<dl>
    <div>
        <dt>Drinks</dt>
        <dd>water</dd>
        <dd>coffee</dd>
        <dd>juice</dd>
    </div>
    <div>
        <dt>Snacks</dt>
        <dd>crisps</dd>
        <dd>nuts</dd>
    </div>
<dl>

with css:

dd:not(:last-child):after {
    content: ", ";
}

Now, no comma will be added after juice.

Upvotes: 0

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Well, here is another way if you don't mind adding a little something to your html. And this will work for any number of dd's not just 3.

Here is a fiddle

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd data-last-dd="">Description</dd>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd data-last-dd="">Description</dd>
</dl>

dd[data-last-dd]:after{
    content:"";
}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157384

You cannot use :last-child or :last-of-type here, as your elements aren't nested inside a sub parent element.

So you can use :nth-of-type(3n), means we select every 3rd iteration of your dd element which is nested under dl element.

dl dd:nth-of-type(3n):after {
    content:"";
}

Demo

This will be useful if each list of yours has consistent amount of items, if not, than I would suggest you to wrap the list with a sub parent and than you can use :last-child or :last-of-type pseudo to target them regardless of the number of items they hold.

Or if they aren't dynamic, than you can use like

dl dd:nth-of-type(3):after,
dl dd:nth-of-type(8):after {
   content: "";
}

/* Assuming if you have inconsistent list items and 3rd dd and 8th dd 
   are last child of their respective lists.. and you don't  want a sub 
   wrapper element */

If you want to have more compatible selector, than you can also use adjacent selector +..

dl dd + dd + dd:after {
    content:"";
}

Demo 2

But above selector will be good to use if you have 2-3 dd elements, more you have, more the selector gets awkward to write, so if you have more items, please refer to the selector I provided you at first place.

P.S Using /* No comma needed here */ is an invalid comment in HTML, should use <!-- Comment goes here -->.

Upvotes: 4

Yuri Gor
Yuri Gor

Reputation: 1463

Try this:

dl:last-child
{
    content:""!important;
}

Upvotes: -5

Related Questions