Unusual CSS Question

ultim

ultim

ultim

Associate
Joined
6 Jan 2006
Posts
1,024
Location
Midlands
I have the following HTML

<div>
<p class="hlight">text</p>
</div>

<div>
<p>text</p>
</div>

In my css, i would like if

div p.hlight {
style the div and NOT the p
}

can this be done?
 
There may be a weird selector for it, but I can tell you for a fact it's not supported properly by enough browsers to make it appropriate for use.

You would want to move the class onto the div tag. If you have it in too many places for that to be feasible, you could write some javascript to apply the class to all divs which contain paragraphs with the class.
 
As above, you can do that quite easily with jquery but not with css alone.

Alternatively, depending on what you're trying to do, you could probably just apply the styling directly to your p. It's a block element by default anyway, just like the div.
 
Tripnologist said:
As above, you can do that quite easily with jquery but not with css alone.

Alternatively, depending on what you're trying to do, you could probably just apply the styling directly to your p. It's a block element by default anyway, just like the div.
Click to expand...

Can you let me know which part of jquery will allow me to do this?
 
div p.hlight {
style the div and NOT the p
}

But that rule says apply whatever styling to the p with a class of hlight inside a div. How do you expect it to style the div?

Would need a little more detail about what you want to do as from that little bit of code I don't understand why your paragraph tags are in divs anyways?

If you want to reference the div directly then give them a class.
 
^ way to read the whole thread.

Probe is however right though, that the easiest way to achieve this is to put a class on your parent DIV. If you're unable to do this and need to use jquery, the selector is

Code: 
var parentDiv = $(".hlight").parent();
 
Spunkey said:
^ way to read the whole thread.

Probe is however right though, that the easiest way to achieve this is to put a class on your parent DIV. If you're unable to do this and need to use jquery, the selector is

Code: 
var parentDiv = $(".hlight").parent();
Click to expand...

I did read it, I am allowed to repeat what others have said. jQuery is the wrong way to solve this problem. You're then making your styling dependent on javascript which is, in this instance, completely unnecessary.

Even if the divs are being created by jQuery or similar, you can still add a class to the div using the same method.
 
The easiest, and proper, way to do this is to apply your CSS to its intended div, and not hack your way around it with jQuery.
 
Well of course the proper way to do it is to apply CSS to the div itself. The first person to reply mentioned that. The jquery suggestions were given as a second method in the event he's unable to add the class.
 
ultim said:
I have the following HTML

<div>
<p class="hlight">text</p>
</div>

<div>
<p>text</p>
</div>

In my css, i would like if

div p.hlight {
style the div and NOT the p
}

can this be done?
Click to expand...

Surely you're trying to apply css to the wrong selector there as p.highlight will just style the p and not the div.

JQuery is cheating too, although it does have some interesting selectors :)
 
Blackstar_solar said:
why can't you do

Code: 
<div class='highlightChildPs'>
<p>Some text</p>
</div>

div.highlightChildPs p
{
  // style rules
}
Click to expand...

That will style the p and not the div!

The html is automatically generated and so i can not change it. I understand i can specify an class to the div and style it but i cant!
 
Here's how I would do it then.

Code: 
$(document).ready(function() { 
	$("p.hlight").parent().addClass("hlightcontainer");
});

Then in your css, apply your styling to hlightcontainer (or whatever you want to name it).
 
You must log in or register to reply here.
Back
Top Bottom