PBS 10 - Demo

Part of the Programming by Stealth Series by Bart Busschots

Styled Lists

The first example is of a nested ordered list list with the CSS containment opperator used to change the numbering style as the nesting gets deeper.

  1. A top-level list item
  2. A top-level liste item containing a nested list
    1. A second-level list item
    2. A second-level list item
  3. A top-level list item
  4. A top-level liste item containing a nested list
    1. A second-level list item
    2. A second-level list item contining a nested list
      1. A third-level list item
      2. A third-level list item

An example of a nested bulleted list with images for bullets:

Text-related Pseudo-Classes

In the text below, the first letter of any paragraph directly after a heading is bolded.

A header

Lorem ipsum dolor sit amet, qui stet mundi ad, prima elaboraret an his. Partem necessitatibus mea ne, id usu viris alterum, vix an modus solet nullam. Habemus dissentias ad pri. Eum no corpora sensibus assentior, ei iisque vidisse qui. Qui magna consul no.

Perfecto nominati definiebas sit in, pri fabellas facilisis an. Autem facer est at. Sed at vitae possit saperet, ei vim iudico delicata. Omnium facilisis theophrastus ea has, agam maiorum ei vix.

Another Header

Ius no iisque utroque, scripta aliquando consectetuer in mel. Vix cu iisque fastidii, ea nisl illum corrumpit usu, cu vel ludus tibique. Choro senserit voluptaria quo ad, nec te illud inani. Eam augue ignota te, eu pri agam nusquam posidonium, cu usu nominati expetenda repudiandae. Ex mel adhuc ignota. Nullam ignota ocurreret ei mea, id est utroque voluptaria.

Duis mutat ornatus ne mei, sanctus patrioque scripserit pro te. Gubergren consectetuer eum eu. Aeque delicata per eu, in viderer percipitur sea, wisi dolores adipisci per at. Ut vis labores inimicus. Eu commune adolescens signiferumque mea, vix ad illum iuvaret.

Child-Order Related Pseudo-Classes

Below is a list styled to have no bullets, with each alternate item coloured differently, and a border added top and bottom for clarity. Finally, to issustrate a valid use of the :hover pseudo-class outside of links, the item being hovered over is highlighted by making the text bold and bigger.

Tech Wish-List