CSS selectors

BobC · 02-04-2019, 03:32 PM

I'm looking to find a way of using a css selector with some unusual parameters.

I'm familiar with using a selector such as

Code:

p + p {
text-indent: 2em;
}

or

Code:

p.class1 + p {
text-align : right;
}

however what I'm looking for is one which will only select the second where the first one has no class declared; i.e it won't select in the case of say

Code:

<p class="caption"> blah, blah, blah </p>
<p> some more text </p>

Or any other "classed" tag.

I'm not sure if this is possible - has anyone found a way of doing this.

BobC

Doitsu · 02-04-2019, 03:58 PM

Theoretically, you could use a :not() pseudo selector for this. For example:

Code:

p:not([class]) + p { color: red; }

However, pseudo selectors are usually only supported by epub3 readers/apps.

RbnJrg · 02-04-2019, 08:15 PM

Quote:

Originally Posted by BobC

I'm looking to find a way of using a css selector with some unusual parameters.

I'm familiar with using a selector such as

Code:

p + p {
text-indent: 2em;
}

or

Code:

p.class1 + p {
text-align : right;
}

however what I'm looking for is one which will only select the second where the first one has no class declared; i.e it won't select in the case of say

Code:

<p class="caption"> blah, blah, blah </p>
<p> some more text </p>

Or any other "classed" tag.

I'm not sure if this is possible - has anyone found a way of doing this.

BobC

I don't understand very well your example but it seems that you are looking for the :nth-child() selector. In your case:

1. In the .css stylesheet:

Code:

p:nth-child(2) {
  background: yellow;
}

2. In the .xhtml file:

Code:

<p>The first paragraph.</p>
<p>The second paragraph.</p>  /* the style will only be applied to this paragraph */
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

The issue here is that the :nth-child() selector it won't be supported by ADE under epub2 (however Kindle with .kf8 will accept it).

BobC · 02-06-2019, 04:48 AM

@Doitsu

The not pseudo class seems to be what I was after, however with its limited support I doubt if I will be using it.

@RbnJrg
I don't think your solution would work, the second paragraph isn't a "child" of the first, it's just a successor and would be selected by P + P. In any case with the limited support I wouldn't want to use it.

It's not a big problem anyway - I was just looking for a lazy way to catch some exceptions to the general rule. I'll continue with my original method where I need to invert the logic and specify the classes for the initial p using something like :

Code:

p {
text-indent : 2em;
}

p.class1 + p, p.class2 + p, p.class3 + p {
text-indent : 0;
}

Thanks for the ideas, I wondered if I was missing something obvious.

BobC

RbnJrg · 02-06-2019, 06:22 AM

Quote:

Originally Posted by BobC

@RbnJrg
I don't think your solution would work, the second paragraph isn't a "child" of the first, it's just a successor and would be selected by P + P. In any case with the limited support I wouldn't want to use it.

BobC

With p + p, you also would apply the styles not only to the second paragraph, but also to the third, fourth, etc. Instead, with p:nth-child(2), you only would apply the style to the second paragraph. Do you see the difference?

And never a tag can be a "child" of another tag. It would be a successor, but not a child. Thouse tags are "childs" of <body> or, if it's present, a <div> tag. For example:

Code:

<div>
     <p>This is the first paragraph and the first child of div</p>
     <p>This is the second paragraph, the second child of div</p>
</div>

Acording what you are looking for, maybe could try the following:

Code:

p[id ~= my_id] + p {
      text-indent: 0;
}

and in the xhtml file:

Code:

<p id="my_id 1">This is the first paragraph</p>
<p>This is the second paragraph</p> /* This one won't be indented */
...
...
<p id="my_id 2">This is the first paragraph</p>
<p>This is the second paragraph</p> /* This one won't be indented */

Take in count that must be a space in the names you give: "my_id 1", "my_id 2", etc..

So, instead of using:

Code:

<p class="class1">blah, blah, blah</p>
<p>blah, blah, blah</p>

you would be using:

Code:

<p id="my_id 1">blah, blah, blah</p>
<p>blah, blah, blah</p>

and in the .css stylesheet, instead of:

Code:

p.class1 + p, p.class2 + p, p.class3 + p {
      text-indent: 0;
}

you would be using:

Code:

p[id ~= my_id] + p {
      text-indent: 0;
}

And perhaps would be better yet to employ:

Code:

p[title ~= my_title] + p {
      text-indent: 0;
}

and

Code:

<p title="my_title 1">blah, blah, blah</p>
<p>blah, blah, blah</p>

because of that way you can use in the same .xhtml file, the same title in several places.

With the selector "p[title ~= my_title] + p", you are going to select all tags that are successors of another tag with a title attribute containing the word "my_title".

Click image for larger version

Name: Image1.png
Views: 130
Size: 111.2 KB
ID: 169531

Click image for larger version

Name: Image2.png
Views: 139
Size: 84.6 KB
ID: 169532

Tex2002ans · 02-06-2019, 05:19 PM

BobC, may I ask what the exact use-case is?

Give a concrete example of what you're trying to emulate. I think that'll make it a bit easier to understand what the issue is, and if there's any other potential ways of tackling the problem.

BobC · 02-07-2019, 05:11 AM

Quote:

Originally Posted by Tex2002ans

BobC, may I ask what the exact use-case is?

Give a concrete example of what you're trying to emulate. I think that'll make it a bit easier to understand what the issue is, and if there's any other potential ways of tackling the problem.

Thank you for the offer, I possibly confused the point by referring to an example. @Doitsu supplied the answer I was looking for in post #2 above and as I said it really isn't a problem, more a matter of seeing if there was something I had missed. The ::not pseudo class would have been the perfect approach, however I prefer overall to use a method which is better supported. I'll stick with the way I have been doing things for some time now.

Again thanks to all who have offered ideas - I've picked up some from @RbnJrg's examples that will come in useful in other situations.

BobC

02-04-2019, 03:32 PM	#1
BobC Guru Posts: 691 Karma: 3026110 Join Date: Dec 2008 Location: Lancashire, U.K. Device: BeBook 1, BeBook Pure, Kobo Glo, (and HD),Energy Sistem EReader Pro +	CSS selectors I'm looking to find a way of using a css selector with some unusual parameters. I'm familiar with using a selector such as Code: p + p { text-indent: 2em; } or Code: p.class1 + p { text-align : right; } however what I'm looking for is one which will only select the second <p> where the first one has no class declared; i.e it won't select in the case of say Code: <p class="caption"> blah, blah, blah </p> <p> some more text </p> Or any other "classed" <p> tag. I'm not sure if this is possible - has anyone found a way of doing this. BobC

02-06-2019, 04:48 AM	#4
BobC Guru Posts: 691 Karma: 3026110 Join Date: Dec 2008 Location: Lancashire, U.K. Device: BeBook 1, BeBook Pure, Kobo Glo, (and HD),Energy Sistem EReader Pro +	@Doitsu The not pseudo class seems to be what I was after, however with its limited support I doubt if I will be using it. @RbnJrg I don't think your solution would work, the second paragraph isn't a "child" of the first, it's just a successor and would be selected by P + P. In any case with the limited support I wouldn't want to use it. It's not a big problem anyway - I was just looking for a lazy way to catch some exceptions to the general rule. I'll continue with my original method where I need to invert the logic and specify the classes for the initial p using something like : Code: p { text-indent : 2em; } p.class1 + p, p.class2 + p, p.class3 + p { text-indent : 0; } Thanks for the ideas, I wondered if I was missing something obvious. BobC

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EPUB and HTML Selectors	Rand Brittain	ePub	2	03-06-2015 12:44 AM
HTML Tags and CSS Selectors	Doctor T	Kindle Formats	3	10-25-2014 11:50 PM
Div Selectors vs Paragraph Classes -- Robustness?	GrannyGrump	ePub	14	10-08-2013 08:49 AM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
ADE support for attribute-value based selectors?	dmapr	ePub	0	08-06-2010 05:57 PM

02-04-2019, 03:58 PM	#2
Doitsu Grand Sorcerer Posts: 5,583 Karma: 22735033 Join Date: Dec 2010 Device: Kindle PW2	Theoretically, you could use a :not() pseudo selector for this. For example: Code: p:not([class]) + p { color: red; } However, pseudo selectors are usually only supported by epub3 readers/apps.

02-06-2019, 05:19 PM	#6
Tex2002ans Wizard Posts: 2,297 Karma: 12126329 Join Date: Jul 2012 Device: Kobo Forma, Nook	BobC, may I ask what the exact use-case is? Give a concrete example of what you're trying to emulate. I think that'll make it a bit easier to understand what the issue is, and if there's any other potential ways of tackling the problem.