CSS thoughts

[SpaceGirl]

Anyone know how to... well almost reverse cascade styling?

I have some HTML cells which need to be formatted in a specific way ONLY
if they contain a <label>somfink</label>.

The labels are formatted using CSS. The table cells are formatted using
CSS. But I only want specific styling on the table cell if a label is
there. I know it's totally the wrong way around, but it's either fix
this, or re-edit 500 pages that are messed up.

Anyone?

m.

 

[Jukka K. Korpela]

Anyone know how to... well almost reverse cascade styling?

I know that you have misanalyzed your problem if you ask it that way.

I have some HTML cells which need to be formatted in a specific way
ONLY if they contain a <label>somfink</label>.

I don't think so. What made _you_ think so? When in dead end, return to
the original question.

I know it's totally the wrong way around,
Fine.

but it's
either fix this, or re-edit 500 pages that are messed up.

It would not be fixing. You would just add some complexity to the
problem without solving it. If the problem is on those 500 pages, then
shouldn't you attack the problem instead of "fixing" something that
needed no fixing?

We still don't know what the problem is. But we know there's no way in
CSS (as currently defined and implemented) to use a selector that
matches element by their content.

 

[SpaceGirl]

I know that you have misanalyzed your problem if you ask it that way.




I don't think so. What made _you_ think so? When in dead end, return to
the original question.




It would not be fixing. You would just add some complexity to the
problem without solving it. If the problem is on those 500 pages, then
shouldn't you attack the problem instead of "fixing" something that
needed no fixing?

We still don't know what the problem is. But we know there's no way in
CSS (as currently defined and implemented) to use a selector that
matches element by their content.

The "problem" is not relevant. I asked a very specific question, but
seeing as you insist: we have a weird application that generates pages.
Some cells have contents. Based on those contents I need to be able to
change the formatting.

I cannot easily edit the application, but I CAN edit the CSS. In this
instance I want a border around cells that have labels in them. I cannot
add a border around the labels, as that would add borders to ALL labels
(because of the crappy way the pages are structured, it'd be impossible
to rely on inheritance).

Now are you go to be helpful, or just moan again?

 

[Els]

I cannot easily edit the application, but I CAN edit the CSS. In this
instance I want a border around cells that have labels in them. I cannot
add a border around the labels, as that would add borders to ALL labels
(because of the crappy way the pages are structured, it'd be impossible
to rely on inheritance).

If it's not all labels, but just 'all labels inside td', or even 'all
labels inside td inside a certain table, you could use
td label{border:1px solid black;}
or
table.classname td label{border:1px solid black;}

 

[SpaceGirl]

SpaceGirl wrote:




If it's not all labels, but just 'all labels inside td', or even 'all
labels inside td inside a certain table, you could use
td label{border:1px solid black;}
or
table.classname td label{border:1px solid black;}

That would work, except that the label lengths are based on the content,
which is not what I want. Found a different way.

td label {
display:block; width:100%; ...
}

Not ideal... but looks "okay".

Bloody users!!!

 

[Els]

That would work, except that the label lengths are based on the content,
which is not what I want.

You could solve that, by doing....

Found a different way.

td label {
display:block; width:100%; ...
}

Yup, that's what I was gonna say ;-)

Not ideal... but looks "okay".

Bloody users!!!

Only if you hurt them...

 

[Steve Pugh]

The "problem" is not relevant. I asked a very specific question,

And you got a very specific answer:

but seeing as you insist: we have a weird application that generates pages.
Some cells have contents. Based on those contents I need to be able to
change the formatting.

As Jukka says, it can't be done with CSS. You could write some
JavaScript that examined the document tree and added a class to all tds
that contained a label.

But if you're going to spend time on a programmatic solution you might
as well spend time on the proper programmatic solution. After all is
this likely to be the only problem caused by the " crappy way the pages
are structured" ?

Steve

 

[SpaceGirl]

And you got a very specific answer:

Rubbish... I got a brush off snidy reply

As Jukka says, it can't be done with CSS. You could write some
JavaScript that examined the document tree and added a class to all tds
that contained a label.

actually you're both wrong. It CAN be done in CSS through selecters, but
sadly requires CSS3 support.

But if you're going to spend time on a programmatic solution you might
as well spend time on the proper programmatic solution. After all is

I wasn't looking for a programmatic solution. And I found a quick and
dirty CSS2 work around anyway.

this likely to be the only problem caused by the " crappy way the pages
are structured" ?

I know the cause. I wasn't looking to fix for the cause, just a bandaid
for the results

You find me some Java (and yes I mean Java, not JS) programmers with
spare time who'll work for free, sure. The entire back end is Java which
I cannot code in.

 

[Steve Pugh]

actually you're both wrong. It CAN be done in CSS through selecters,

Jukka did specify "CSS (as currently defined and implemented)".

but sadly requires CSS3 support.

I'm looking at the CSS3 selectors module and I can't see it. The
:contains pseudo-class only matches text content, not markup. Which
selector did you have in mind?

is

I wasn't looking for a programmatic solution.

So what? I was only mentioning it in passing. For all I knew a JS hack
may have been good enough for you purposes, or you may just have needed
a little extra push to fix the problems with application.

I know the cause. I wasn't looking to fix for the cause, just a bandaid
for the results

Ah, well, silly us for thinking that you actually cared about your
work. Won't make that mistake again. ;-)

Steve

 

[SpaceGirl]

Jukka did specify "CSS (as currently defined and implemented)".




I'm looking at the CSS3 selectors module and I can't see it. The
:contains pseudo-class only matches text content, not markup. Which
selector did you have in mind?




So what? I was only mentioning it in passing. For all I knew a JS hack
may have been good enough for you purposes, or you may just have needed
a little extra push to fix the problems with application.




Ah, well, silly us for thinking that you actually cared about your
work. Won't make that mistake again. ;-)

Steve

I care! The entire system is being replaced by a Flash/Flex solution, so
honestly, quick fixes are all I'm willing to do on this product. It's
hopelessly limited by HTML/CSS as it is.

 

[Aquila Deus]

The little SpaceGirl cried:

Anyone know how to... well almost reverse cascade styling?

I have some HTML cells which need to be formatted in a specific way ONLY
if they contain a <label>somfink</label>.

The labels are formatted using CSS. The table cells are formatted using
CSS. But I only want specific styling on the table cell if a label is

there. I know it's totally the wrong way around, but it's either fix
this, or re-edit 500 pages that are messed up.

Anyone?

javascript

 

[mark | r]

<style>
td label{}
</style>

mark

 

[Toby Inkster]

It CAN be done in CSS through selecters, but sadly requires CSS3
support.

No -- it can't, even with CSS 3.

Which is a shame -- I've often found the need to do such things. It would
be nice to have a logical inverse of the "E > F" selector such that:

P < B { color: red; }

will make all paragraphs red if they contain some bold text as a direct
child. If you want to include indirect children, you could use:

P<B,P<*<B,P<*<*<B,P<*<*<*<B,P<*<*<*<*<B { color:red; }

 

[dorayme]

Anyone know how to... well almost reverse cascade styling?

I have some HTML cells which need to be formatted in a specific way ONLY
if they contain a <label>somfink</label>.

The labels are formatted using CSS. The table cells are formatted using
CSS. But I only want specific styling on the table cell if a label is
there. I know it's totally the wrong way around, but it's either fix
this, or re-edit 500 pages that are messed up.

Anyone?

m.

I know that you know you can re-edit all 500 pages, but perhaps you don't
know that it might not be so hard to do: you make a class for a cell. You
then make a global text search for all cells that have the 'label" text and
you replace each and every instance of those cells with a cell that is of
the special class. Do you have grep search and replace facilities. If you
get the formula right, it should work like a charm and fast, automatically,
you won't have to go to each and every file and hand change. Then you will
control all from css sheet then...

dorayme

 

[dorayme]

I know that you know you can re-edit all 500 pages, but perhaps you don't
know that it might not be so hard to do: you make a class for a cell.

dorayme

Seems I was too hasty! You later explain you don't have easy access to the
content, that it is generated or something... Sorry I did not know this...

dorayme

 

[Leif K-Brooks]

It would be nice to have a logical inverse of the "E > F" selector
such that:

P < B { color: red; }

will make all paragraphs red if they contain some bold text as a
direct child.

While we're doing selector wishlists, I've always wanted an & selector
which would work like +, except that instead of selecting the second of
a pair of elements, it would select an anonymous box surrounding both of
the elements involved. So, for instance:

P & P { border: 1px solid black; }

Would put a border around pairs of paragraphs, something like this:

+-------------------------------+
| Paragraph one |
| |
| Paragraph two |
+-------------------------------+

+-------------------------------+
| Paragraph three |
| |
| Paragraph four |
+-------------------------------+