[SOLVED] help on sibling selector

[departedmind]

div.contact_us h5 + p + p { padding-bottom:0px!important; }

 

does not works in IE any Help

[haku]

That's because there are no plus signs in CSS. What is it you are trying to do?

[departedmind]

There is I read in a book, it is called Direct Adjacent Sibling Selector

[haku]

Not a very good book then is it. If it was, your code would be working.

 

!important is sloppy coding as well. It means you haven't structured your CSS well. So if that was in the book, then its another indicator that it's not a great book.

 

So let us know what you are trying to do, and we will help you do it the right way.

[TheFilmGod]

Actually Haku, you are incorrect. The plus sign is an adjacent sibiling selector.

 

Check out -> http://css.maxdesign.com.au/selectutorial/selectors_adjacent.htm

 

I never use it, as it is unnecessary.

 

div.contact_us h5 + p + p { padding-bottom:0px!important; }

 

This code means that the last p in this html code will have a bottom padding of 0.

 

<div class="contact">
<h5>Heading</h5>
<p>Paragraph 1</p>
<p>Paragraph 2 with 0 bottom padding.</p>
</div>

 

Departedmind, does your code look exactly the same as mine? Why are you using the !important css property? Important usually is required to rewrite a more specific element by a less specific css styling property - that creates a problem in IE!

 

Post your html code. 

[haku]

Learn something new every day!

[departedmind]

div.contact_us h5 + p + p { padding-bottom:0px!important; }

 

This code means that the last p in this html code will have a bottom padding of 0.

 

<div class="contact">
<h5>Heading</h5>
<p>Paragraph 1</p>
<p>Paragraph 2 with 0 bottom padding.</p>
</div>

 

Departedmind, does your code look exactly the same as mine? Why are you using the !important css property? Important usually is required to rewrite a more specific element by a less specific css styling property - that creates a problem in IE!

 

Post your html code. 

 

Yeah, same as yours , it works great in Firefox , It didn't work in IE so I added !important but it didn't work.

Not a very good book then is it. If it was, your code would be working.

 

!important is sloppy coding as well. It means you haven't structured your CSS well. So if that was in the book, then its another indicator that it's not a great book.

 

So let us know what you are trying to do, and we will help you do it the right way.

 

http://search.barnesandnoble.com/Beginning-CSS/Richard-York/e/9780470096970

 

So, this book is bad.....

 

 

[TheFilmGod]

Why do you need to use the sibiling selector? Why not just add a class name to the paragraph and style it through the class selector?

 

[haku]

I agree.

 

I have no idea if that book is any good or bad. Never read it. But, a couple things make me suspect that it's not that great:

 

1) It's telling you to use !important. This is sloppy coding. If he told you *about* it, but said not to use it, then I don't see a problem. If he is telling you to use it, it's not good.

2) It says the book has updates for Firefox 2. That means it was originally written for firefox 1, which is a few years back now. That means there is a good chance the book is out of date.

[departedmind]

@haku

That book is good but a bit old, I learned lot of things from that book, it does not tell "me" to use !important, I used it cause IE was behaving strangely.

 

Why do you say !important is sloppy coding as well.

 

@TheFilmGod

I cannot add a class name, cause h5, p and p are dynamically created content in DNN module, so I thought sibling selector could work here.

 

Anyway thanks...

[haku]

Why do you say !important is sloppy coding as well.

 

CSS works on the principal of specificty. Basically it means that a selector that is more specific will take precedence over one with less specificity. For example:

 

HTML:

<a class="target" href="#">link</a>

 

If your CSS looks like this:

 

a {color: red;}

a.target {color: blue;}

 

The link above will be blue, because a.target is more specific than a. However, if you use !important, it takes it out of the flow of the specificity. This means that you could add a more specific tag, and it still won't take precedence, even though it should.

 

This makes code harder to adjust in the future when you come back to it.

 

This is why it's considered sloppy, it's somewhat of a hack (though not a real hack, they are different). Instead, you should write tags to be more specific if you want a certain tag to take precedence.

[departedmind]

Thanks...

 

Learn something new every day!

[TheFilmGod]

Hey Departedmind, here's a neat (advanced) technique I use! 

 

Do this:

 

<div class="contact_us">
<h5>Heading</h5>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>

 

 

You can use the firstchild selector and do some reverse coding.

 

First, set the bottom padding to 0 for all paragraphs in the div. Then use the firstchild selector to "undo" the padding for the first paragraph. This is the most browser compatible way to style elements through css.

 

Here's an example:

.contact_us p {
padding-bottom: 0; /* I recommend this: padding: top right 0 left; */
}

/* "Undo" the padding for the first pargraph */
.contact_us p:first-child {
padding-bottom: 5px; /* Set it to what it was originally. */
}
}

 

I hope that helps.

FilmGod out. 

[bronzemonkey]

div.contact_us h5 + p + p { padding-bottom:0px!important; }

 

does not works in IE any Help

 

That's because IE6 does not support the adjacent selector. IE7 does.

 

If you are just trying to control the space between paragraphs in a "contact" section you might be able to achieve what you are after by using margins instead. Set each <p> to have a top-margin (and no other vertical margins or padding). You will get space between the two paragraphs but without unwanted space below the final paragraph.

 

If you are not floating the paragraphs or heading then you will find that the margin between the <h5> and the first <p> will also collapse (i.e. the space between the elements will be equal to the whichever margin is largest, they will not combine).

 

You can use the firstchild selector and do some reverse coding.

 

That won't work because the first paragraph in .contact_us is not the first-child. The h5 is the first-child.

[departedmind]

That's because IE6 does not support the adjacent selector. IE7 does.

 

I am talking about IE7 not IE6.

 

@TheFilmGod

Thanks for the code, but it didn't work. 

[bronzemonkey]

I am talking about IE7 not IE6.

 

Then you'll have to post the rest of your code if you want any help, because the adjacent selector works perfectly as intended in IE7.

 

And in the future, try to mention the specific browser you are having problems in.

[DamienRoche]

I think the first-child method is a good idea here.

 

Could you possibly wrap the paragraphs in another div and then use the first-child.

 

<div "parwrap">

<p>Paragraph 1</p>

<p>Paragraph 2</p>

</div>

 

Then style both as you want the second one to be and add- to default:

 

.parwrap:first_child{}

 

Is there no way of assigning a class to the last one?

[departedmind]

Is there no way of assigning a class to the last one?

 

Finally, assigned a class name dynamically. So, i think direct and indirect adjacent sibling selectors are of no use.

 

Thanks to everyone ...

[haku]

I can see how the sibling selector could be of use in certain situations. Now that I know about it, I will probably use it at some time. The only problem is that if you add an extra element in between the reference and the selector, your CSS will fall apart, which isn't very good.