CSS for group of HTML elements in a series of such elements

Turbocapitalist · 09-17-2017, 04:51 AM

If I want to put a border around a cluster of paragraphs, I can do it by wrapping it in a DIV element. So with this CSS:

Code:

div.a { border: medium solid #000; }

and this XHTML:

Code:

<p>One</p>
<div class="a">
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>  
</div>
<p>Five</p>

will put a border around paragraphs Two, Three, and Four and leave paragraphs One and Five alone.

Is there another way to get the same effect using more or different CSS?

I've tried various pseudo classes with the following but can't get quite the same effect as with the DIV element as a wrapper.

Code:

<p>One</p>
<p class="b">Two</p>
<p class="b">Three</p>
<p class="b">Four</p>  
<p>Five</p>

The :last-child and :first-child don't apply there since there are other elements before and after the targeted series.

The :first-of-type and :last-of-type don't help either since there are also other P elements before and after the targeted series and it seems not to notice the class.

rigor · 09-17-2017, 07:47 AM

Hi Turbocapitalist,

Perhaps the following will make clear ( when viewed in your browser ) that, strictly speaking, you didn't put a border around a cluster of paragraphs, you put the border around the div element. In the second version, you can see that with additional, more specific CSS border specifications, the situation gets closer to that with a div element; but there is still more finagling beyond what I've provided, needed to get an appearance identical to that with the div.

Code:

<!DOCTYPE html>

<html>
    <head>
        <meta  http-equiv="Content-Type"  content="text/html; charset=UTF-8">
        <style>
            div.a { border: medium solid #000; }
            p.first { border-top: medium solid #000;  border-left: medium solid #000;  border-right: medium solid #000; }
            p.iterim { border-left: medium solid #000;  border-right: medium solid #000; }
            p.last { border-bottom: medium solid #000;  border-left: medium solid #000;  border-right: medium solid #000; }
        </style>
        <title>it</title>
    </head>
    <body>
        <p>one</p>
        <div class="a">
        <p>two within div</p>
        <p class="b">three</p>
        <p>four</p>
        </div>
        <p>five</p>
        <hr>
        <p>one</p>
        <p class="first">two without div</p>
        <p class="iterim">three</p>
        <p class="last">four</p>
        <p>five</p>
    </body>
</html>

Turbocapitalist · 09-17-2017, 07:59 AM

Quote:

Originally Posted by rigor

strictly speaking, you didn't put a border around a cluster of paragraphs, you put the border around the div element.

Thanks for taking a look. Yes, technically the border was around the div element. However, the end result looks for all practical purposes the same as what I want.

Using the id attribute or even different classes for paragraphs to be marked would not be possible in the case I am applying this to because there are many pages and some groups have several such paragraphs and other groups on other pages have only one.

There's not a keep-with-next option for the CSS formatting.

sundialsvcs · 09-17-2017, 08:49 AM

Also note declarations such as:

Code:

div.a p { color=blue; }
     ^^^

... will turn paragraphs blue if they occur within a <div class="a">.

Turbocapitalist · 09-17-2017, 01:23 PM

Quote:

Originally Posted by sundialsvcs

Also note declarations such as:

Yes. Wrapping them in a div element is what I have. I'm wondering if there is a way using just CSS to identify one or more element+class in a row, such as shown in the second half of #1 above, and treat them as a group in regards to formatting.

rigor · 09-17-2017, 03:15 PM

If you literally mean just CSS, no HTML attributes at all, not even the class attribute, then you can do something like what I've put further below. But of course it's rather restrictive, since it keyed off of the exact relationship of the p elements to their parent; move them and then you very likely need to change the CSS. I felt that something along the lines of the HTML class element based approach which I first tried to illustrate ( first, iterim, last ) , is more flexible, because you don't have to worry about the exact position of the p elements relative to their parent.

Code:

<!DOCTYPE html>

<html>
    <head>
        <meta  http-equiv="Content-Type"  content="text/html; charset=UTF-8">
        <style>
            /* reference CSS:  div.a { border: medium solid #000 ; }  */
            p:nth-child(2)  {
                                border-top: medium solid #000 ;
                                border-left: medium solid #000 ;
                                border-right: medium solid #000 ;
                                padding-bottom:  0px ;
                                margin-bottom:  0px ;
                            }
            p:nth-child(3)  {
                                margin-top:  0px ;
                                padding-top:  0px ;
                                border-left: medium solid #000 ;
                                border-right: medium solid #000 ;
                                padding-bottom:  0px ;
                                margin-bottom:  0px ;
                            }
            p:nth-child(4)  {
                                margin-top:  0px ;
                                padding-top:  0px ;
                                border-bottom: medium solid #000 ;
                                border-left: medium solid #000 ;
                                border-right: medium solid #000 ;
                            }
        </style>
        <title>it</title>
    </head>
    <body>
        <p>one</p>
        <p>two without div</p>
        <p>three without div</p>
        <p>four without div</p>
        <p>five</p>
    </body>
</html>

I just took a very quick approach to illustrate the overall effect; the specifics would need to be adjusted to satisfy your particular spacing requirements, etc. What I posted works for me in Opera. I've attached an image file to show how it appears in Opera.

ondoho · 09-18-2017, 02:01 AM

Quote:

Originally Posted by Turbocapitalist

If I want to put a border around a cluster of paragraphs, I can do it by wrapping it in a DIV element.

that's how i would do it, and i know of no other way.
why is it not sufficient?

Turbocapitalist · 09-18-2017, 03:30 AM

Quote:

Originally Posted by ondoho

that's how i would do it, and i know of no other way.
why is it not sufficient?

Two reasons:

The first is because I had a bunch of <p class="a"></p> elements scattered in groups throughout a static web site and wanted to avoid retrofitting the pages with extra <div> elements to wrap the groups.

The other is to also to explore what the current incarnations of CSS can do. Simple CSS formatting has been around since the 1990's but since CSS3 can do stuff like this,

http://ryan-kahn.com/static/onlyCSS/
http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

then I figure it can also be made to do useful things as well.

ondoho · 09-18-2017, 01:41 PM

^ and this:
http://www.csszengarden.com/219/

rigor · 09-18-2017, 07:44 PM

If there is really, really, really a desire to change nothing now about the HTML within the page(s), it might at least be somewhat more flexible, possibly less work/mess, etc., if there is some way to identify, more or less from the perspective of the DOM, the location of each cluster of paragraphs you wish to outline. That could be a variety of things, such as the indicating that the 4th through 7th paragraphs after the 9th div should be handled as a cluster, or the 14th paragraph after an element with id="an_element", or just about whatever.

Then rather than have a lot of "hard-coded" CSS, you could potentially have the JSON for an object which identifies various attributes of the HTML which would allow Javascript to locate each paragraph via the DOM, and know whether it's the first, last, only, etc., paragraph, then dynamically apply CSS attributes accordingly, after the page has just finished loading.

In that way, any possible future page change(s), however unlikely, might be more easily/quickly accommodated. Also the CSS for a particular area within all paragraph clusters, could be specified in only one place, without having to be repeated a bunch of times. So any potential future CSS changes could also be handled easily.

Turbocapitalist · 09-18-2017, 11:05 PM

Quote:

Originally Posted by ondoho

^ and this:
http://www.csszengarden.com/219/

Thanks. That has a lot of potential. It's been years sine I checked there and they have advanced quite a bit.

Quote:

Originally Posted by rigor

If there is really, really, really a desire to change nothing now about the HTML within the page(s), it might at least be somewhat more flexible, possibly less work/mess, etc., if there is some way to identify, more or less from the perspective of the DOM, the location of each cluster of paragraphs you wish to outline.

Yes, that's what I am trying to find but as mentioned the first-of-type etc don't pay attention to classes. The elements in question move around relative to the start so 'nth' counters can't work either. I may have to give up until CSS4 is out.

ondoho · 09-18-2017, 11:51 PM

do you want to put a border
a) around each paragraph separately, or
b) around all of them as if they were in a box?
if a), it's trivial, if b) i don't think any future release of css will cater for that without changes to the html.

Quote:

Originally Posted by Turbocapitalist

I may have to give up until CSS4 is out.

maybe you can put
top and side borders around the first paragraph,
only side borders around all subsequent paragraphs
bottom and side borders around the last paragraph.

Turbocapitalist · 09-19-2017, 12:01 AM

I've been aiming for option b.

Quote:

Originally Posted by ondoho

maybe you can put
top and side borders around the first paragraph,
only side borders around all subsequent paragraphs
bottom and side borders around the last paragraph.

Yes. I've tried a few variants on that but there is no way that I've found to do it in a robust manner. Hence trying to use LQ's collective experience.

It looks like we've gotten as far as we can with this using the existing specs and I'm stuck with wrapping them in a div element. Would you know off the top of your head any place I can submit the use-case for consideration in CSS4 or CSS5?

ondoho · 09-19-2017, 12:12 AM

so is editing the original html an issue or not? i'm confused.

anyhow, what i suggested is possible i'm pretty sure, but i remember it being tricky.
the way i see it, css is a very low-level language, not much abstraction to make it easier for the user.
i'd start here: https://www.w3schools.com/cssref/css_selectors.asp

also remember browser engine compatibility when testing.

edit:
i think i remember :last-child wasn't working as expected (or at all) on some browsers.
in fact i remember having had a very similar problem to yours some time ago.

Turbocapitalist · 09-19-2017, 12:24 AM

Retrofitting the HTML is not desirable, but not avoidable in this case. Fortunately the HTML is consistent and the replacements can be done at scale with a perl one-liner.

With spare time, I've been working through the official list of selectors and have had this open in a tab for a week or so in the background to keep me from forgetting:

https://www.w3.org/TR/css3-selectors/#selectors

It looked like attribute selectors like p[class=b] would have had potential but it looks like no browsers support that yet.