changing bullet icons depending on local hierarchy?

[bill b]

Is there a way to set paragraph styles to vary depending on local conditions? In css I can specify selector relationships, like
ul ul {
stuff...
}

What I have are 3 bullet paragraph styles (I don't use ul and ol):
{solid bullet}p.bullet
{circle}p.bullet1
{solid bullet}p.bullet2

What I'd like to do is have:
{solid bullet}p.bullet1
{circle}p.bullet2

when I start with p.bullet1 instead of p.bullet.

Is there a way to do this?

Thanks,
Bill

[devjoe]

This is tough when you aren't using ul tags to contain the lists, because you use the hierarchy information which makes it so easy to fix this in nested lists using CSS.

One way you could do it is to define the default p.bullet1 and p.bullet2 for the case where there is no p.bullet, and then use the ~ selector to change every p.bullet1 and p.bullet2 which appears after a p.bullet on the same page.

p.bullet ~ p.bullet1 { stuff that changes the bullet on p.bullet1 }
p.bullet ~ p.bullet2 { ... }

This will change all of them for the result of the page, though, so it assumes consistency within any one topic.

There is also the + selector which does the same thing but for the immediately following element only, but that would never work here because you'd need to define it for all the different sequences of bullets that might appear.

[bill b]

Thanks, I'll give it a try.
Bill

[bill b]

Hmm... none of the more complicated selector arrangements seem to work, at least for me:

p.bullet>p.bullet1 {
}

didn't have any effect. I gave up and created a new class, p.bullet1afterbullet.

Thanks again. I do wonder why ~, >, etc. don't seem to work in Flare. Must be me, but I can't see what I'm doing wrong.

Bill

[devjoe]

If you are going to use these complex selectors you need to understand what each one does.
A > B is for a B element whose parent is an A element. Now maybe this is right (if you have paragraphs inside other paragraphs!) but it is certainly not what I expected from your description.
A B is for B inside an A, but there may be other intervening tags (i.e. B whose parent is C whose parent is A)
A + B is for B directly following A under the same parent element
A ~ B is for B following A under the same parent element, not necessarily directly following.

It might help if you posted a HTML fragment and a CSS fragment of what is failing for you.
You can also take a look at how your browser is interpreting the CSS by opening the page in the output, right-clicking the tag in question, and clicking Inspect Element. The exact display you get from this is slightly different in Chrome, Firefox, and IE, but they all have it now. You can then click in the source code the specific p tag you are interested in and see beside it all of the relevant formatting that applies and in particular which formatting is superseded by other formatting elsewhere.

[bill b]

Thanks, devjoe! I see what I did wrong now....