Thread: CSS selectors
View Single Post
Old 02-06-2019, 06:22 AM   #5
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,830
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by BobC View Post

@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 <p> tag can be a "child" of another <p> 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 <p> tags that are successors of another <p> tag with a title attribute containing the word "my_title".

Click image for larger version

Name:	Image1.png
Views:	149
Size:	111.2 KB
ID:	169531 Click image for larger version

Name:	Image2.png
Views:	167
Size:	84.6 KB
ID:	169532
Attached Files
File Type: epub Selectors.epub (2.0 KB, 143 views)

Last edited by RbnJrg; 02-06-2019 at 06:45 AM.
RbnJrg is offline   Reply With Quote