Html Question posted in
Some basic documentation can be found here.

Html – How can i select the first Element when various optional elements are valid?

I am in the area of CSS printed media. I have HTML documents that follow this structure:

A mainelement with following child elements:

  • mandatory: div.list-of-titles element (document has a Table of Content, of Figures, of Images … in this div)
  • optional: section.dedication elemens (document may have a dedication)
  • optional and unbounded: section.preface (document may have one ore more preface sections)
  • mandatory and unbounded: section.chapter (document has one ore more chapters)

For good old-fashioned Books i’d like to number the pages with the ToC and the dedication (if any) with roman numbers, and the real content with decimal / arabic numbers. For this, i have to do a counter-reset: page when the real content begins.

The real content may start with the first section.preface element, or, if there is no such element, with the first section.chapter element. So my question is:

How can i select the first child element of the main element which is a section and has either a preface class or a chapter class?

Thanks,
Frank Steimke

Tags:

3

Answers


  1. 0

    In CSS, you could use the :first-child pseudoclass along with the section selector and the is() pseudoclass function.

    main section:first-child:is(.preface, .chapter) {
  /*Your styles here*/
}

    Hope it helps you!

    Login or Signup to reply.
  2. 0

    Your question would more easily be solved by restructuring your HTML rather than going with what you’ve suggested.

    A possible solution if you can’t do this is to style what you’ve asked for ignoring the idea of only styling the first match, then "undo" for subsequent children using the general sibling selector ~ e.g.

    // Set any section element that has the preface or chapter class as a red background.
main section:is( .preface, .chapter) {
  background-color: red; 
}

// Unset background on any adjacent siblings subsequent to this
main section:is( .preface, .chapter) ~ :is( .preface, .chapter ) {
  background-color: unset;
}

    This is just a general idea of how you might approach this and isn’t tested.

    Login or Signup to reply.
  3. 0

    The clearest way might be to simply spell out each possibility
    using the CSS + combinator.

    main>div.list-of-titles:first-child+section.dedication+section.preface,
main>div.list-of-titles:first-child+section.dedication+section.chapter,
main>div.list-of-titles:first-child+section.preface,
main>div.list-of-titles:first-child+section.chapter {
  border: solid 1px red;
}
    <main>
  <div class="list-of-titles">list of titles</div>
  <section class="dedication">dedication</section>
  <section class="preface">preface1</section>
  <section class="preface">preface2</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="dedication">dedication</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="preface">preface1</section>
  <section class="preface">preface2</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>

    There is probably more specificity here than you need in practice and you can shorten things using the CSS nesting facility.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search