CODEWITHSUNDEEP
htmlcsscss-selectors
markzzz
markzzz

Reputation: 47945

Can't I use the :first-child selector in this scenario?

My code :

<div class="allegati-item">
    <div class="allegati-titolo">Download</div>
    <a class="allegati-link" href="/documenti/DocumentoTest.pdf">Link1</a>
    <a class="allegati-link" href="/documenti/DocumentoTest.pdf">Link2</a>
</div>

.allegati-link
{
    border-top:1px solid #FF0000;
    display:block;
    margin-bottom:4px;
}

.allegati-item a.allegati-link:first-child
{
    border:0;
}​

I want to delete border in the first allegati-link element, but since there is a div before it, inside the allegati-item, seems this can't be possible?

Upvotes: 1

Views: 97

Answers (4)

Narendra
Narendra

Reputation: 3117

You can this also

$(".allegati-titolo").next().attr("style", "border-top:0px; display:block; margin-bottom:4px;");

This will first select next element of div having class="allegati-titolo" and then apply the style to the 1st link.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

premising that :first-of-type is probably the best choice, here's another alternative for browser that doesn't support yet that pseudoclass

.allegati-link { border: 0; }
.allegati-link + .allegati-link { border-top: ...}

doing so you will remove the border only from the first link .

Upvotes: 2

Christoph
Christoph

Reputation: 51181

Use :first-of-type instead or

.allegati-item > .allegati-titolo + a

The last version has slightly better browser support (from IE7 on) while the first one is less dependent on your markup.

Upvotes: 3

Engineer
Engineer

Reputation: 48793

You may try this instead:

.allegati-item .allegati-titolo + a.allegati-link{

Upvotes: 3

Related Questions