CSS select tag without first-child

Question

With CSS I want to select the li without description, without first-child = b , to apply a padding-letf on the li without title HTML

<ul>
    <li><b>title</b>description</li>
    <li><b>title</b>description</li>
    <li>description without title</li>
    <li><b>title</b>description</li>
</ul>

something like

ul li:not[first-child=b]

PS: I cannot add a class to the different li

thank you

you can set margin-left: 10px for li tag, then set margin-left: -10px for li > b:first-child — Văn Quyết, Nov 16 '16 at 07:35
Are you using bootstrap in the project? If yes then i have another better solution. — Aslam, Nov 16 '16 at 07:40
I suggest you use dl and dt for this specific case. http://codepen.io/anon/pen/vyXmGq — Aslam, Nov 16 '16 at 07:45

score 1 · Answer 1 · answered Nov 16 '16 at 07:27

1

this is impossible with css due to the way browser is matching selectors - you cannot select element by something that is inside of it... however, it might be available in the future

answered Nov 16 '16 at 07:27

pwolaq

6,343
19
45

thank you this feature is really missing – Erick Boileau Nov 16 '16 at 07:29
any reason for downvote? – pwolaq Nov 16 '16 at 07:32
downvote ? I did nothing, and it is certainly the best answer i have certainly click on tne arrow to go to the top or bottom of the page :-) – Erick Boileau Nov 16 '16 at 07:33
yeah but someone did :) – pwolaq Nov 16 '16 at 07:33

score 1 · Accepted Answer · edited Nov 16 '16 at 07:38

1

You cannot select list-items based on content till now. However if the goal is just to apply a padding-left on the li without title HTML, you can do it as follows:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 20px;
}

li > b:first-child {
  margin-left: -15px;
}

<ul>
  <li><b>title</b>description</li>
  <li><b>title</b>description</li>
  <li>description without title</li>
  <li><b>title</b>description</li>
</ul>

edited Nov 16 '16 at 07:38

pwolaq

6,343
19
45

answered Nov 16 '16 at 07:34

Mohammad Usman

37,952
20
92
95

thanks it work perfectly best answer – Erick Boileau Nov 16 '16 at 07:38
@ErickBoileau you are welcome) – Mohammad Usman Nov 16 '16 at 07:43
@ErickBoileau please accept best answer that solved your problem... so that others can take help from it as well... – Mohammad Usman Nov 16 '16 at 07:57
I have no idea how to set the best answer – Erick Boileau Nov 16 '16 at 08:07
@ErickBoileau Just mark the tick icon appearing below answer votes to accept it. – Mohammad Usman Nov 16 '16 at 08:10
thanks ! I've marked the first answer with margin-left – Erick Boileau Nov 16 '16 at 08:19

score 1 · Answer 3 · answered Nov 16 '16 at 07:35

1

A workaround, if it helps anyway:

ul{
    padding-left:5px;
}
li > b{
    margin-left:-5px;
}

answered Nov 16 '16 at 07:35

Jones Joseph

4,703
3
22
40

CSS select tag without first-child

3 Answers3