0

Given the Xml below which I cannot change, is it possible to have the conditional results with just one css file. I can only one css at the moment but css is very limited in terms of conditions from my understanding.

CASE 1:

<doc>
<story>
<c1><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C1</text-web></text-web-group></p></c1>
</story>
</doc>

CASE 2:

<doc>
<story>
<c1><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C1</text-web></text-web-group></p></c1>
<c2><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C2</text-web></text-web-group></p></c2>
</story>
</doc>

CASE 3

<doc>
<story>
<c2><p><text-web-group class="MajorEvent"><text-web class="MajorEvent">Sample Text C2</text-web></text-web-group></p></c2>
</story>
</doc>
  • CASE 1. Sample Text C1 is displayed if there is text only in C1/p/text-web-group/text-web
  • CASE 2. Only display Sample Text C1 is displayed if there is text in both C1/p/text-web-group/text-web and C2/p/text-web-group/text-web
  • CASE 3. Sample Text C2 is displayed if there is a text only in C2/p/text-web-group/text-web
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
jay.james.666
  • 153
  • 7
  • So what is your question? – EternalHour Aug 11 '14 at 06:29
  • 1
    Current CSS specifications do not allow you to do what you want. The way your XML is organized doesn’t allow you to style using [:empty](https://developer.mozilla.org/fr/docs/Web/CSS/:empty) and you’ll require targeting a parent, something (probably) coming in [CSS Selectors Level 4](http://dev.w3.org/csswg/selectors4/#relational) available in no browser today. – LeBen Aug 11 '14 at 06:33
  • @LeBen, you should make that an answer. – Steve Bennett Aug 11 '14 at 06:38

2 Answers2

2

Yes there is a way with only CSS. According to your explanation, you can use the following CSS:

story > *:first-child + * > p > text-web-group{
    display: none;
}

Working Fiddle (change html to check)

PS: If you have more tags like c1, c2, c3 etc as siblings then use ~ (sibling selector) instead of + (adjacent selector) in the above code.

Note: Using universal selector *, as I did will effect the performance. Not in modern browsers though.

Community
  • 1
  • 1
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • no doubt that works correctly, but would you have have solution if there different tags between story and c1. – jay.james.666 Aug 11 '14 at 07:25
  • @jay.james.666 if you know the depth, then you can use `>` as I did above. if you don't know the depth, then it is not possible with CSS. – Mr_Green Aug 11 '14 at 07:28
1

Current CSS specifications does not allow you to do what you want.

Sadly the way your XML is organized does not allow you to use the pseudo-class :empty to style (hide) the “Sample Text C…”.

Also you’ll require targeting parents to hide <c1> or <c2>, something (probably) coming in CSS Selectors Level 4 but not available in any browser today.

LeBen
  • 1,884
  • 12
  • 21