First selector after a li

Question

I have this scenario :

<ul>
    <li>
        <a href="/">Home</a>
    </li>

    <li class="page_item page-item-5 current_page_item">
        <a href="/help">Help</a>
    </li>

    <li class="page_item page-item-7">
        <a href="/follow">Follow</a>
    </li>
</ul>

li
{
    margin-bottom:10px;
}

a
{
    border:1px solid #000000;
}

ul li + page_item a
{
    border:0;
}

and, how you an see, I'd like to remove border only on the first link with class page_item, with ul li + page_item a, but seems it doesnt works?

give a class or an id to your ul then do it like `ul#test > li:first-child` — Berker Yüceer, Oct 15 '12 at 09:23

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

You were missing the . in front of your class selector.

Assuming your first li will never have the class and you just want to pick the li.page_item that comes after it, you can use this selector:

ul li:first-child + li.page_item a
{
    border:0;
}

But if you want the first li.page_item a to not have the border regardless of where it is, you'll need to go about this another way...

ul li.page_item a
{
    border:0;
}

a, ul li.page_item ~ li.page_item a
{
    border:1px solid #000000;
}

edited May 23 '17 at 12:12

Community

1
1

answered Oct 15 '12 at 09:26

BoltClock

700,868
160
1,392
1,356

Well, this is what I asked! Thank you! – markzzz Oct 15 '12 at 09:27

score 0 · Answer 2 · answered Oct 15 '12 at 09:23

0

You use this code in css file

ul li.page_item a{
  border:0px none;
}

answered Oct 15 '12 at 09:23

Saeed

3,415
3
24
41

this is the true answer of the question. +1 – Berker Yüceer Oct 15 '12 at 09:24
1

@Berker Yüceer: No, it's not. – BoltClock Oct 15 '12 at 09:30
use !important in the end of none for example border:0px none !important; – Saeed Oct 15 '12 at 09:35
@BoltClock first child gives first li and if you define `a` at the end such as `ul > li:first-child + li.page_item > a` it is the solution. Just needs to add class there oh now i see.. – Berker Yüceer Oct 15 '12 at 09:39
whats > in ul > li:first-child ? and whats deffrenet between > and first-child ? – Saeed Oct 15 '12 at 09:46

score 0 · Answer 3 · answered Oct 15 '12 at 09:23

0

You missed the class identifier (a dot)

Change the last part of your css:

ul li.page_item a
{
    border:none;
}

also a tip: use border:none; instead of border:0

answered Oct 15 '12 at 09:23

PoeHaH

1,936
3
28
52

okay sorry. then why not just give your first list item a class="noborder" and then css: .noborder{border:none;} ? – PoeHaH Oct 15 '12 at 09:29
No! Check BoltClock♦ answer ;) – markzzz Oct 15 '12 at 09:35
great that you found the answer you were looking for :) – PoeHaH Oct 15 '12 at 09:37

First selector after a li

3 Answers3