Re: Adding Semantic Metadata to Webpages' Elements via CSS Selectors

Dan,

I might have misread a sentence in your email... If you were indicating to explore adding functions like graph() or list() for developer convenience, then, if I understand correctly, walking through it, one would be looking at comparing possibilities like:

element.class
{
    about: triple(s1, p1, o1) !add;
    about: triple(s2, p2, o2) !add;
    about: triple(s3, p3, o3) !add;
}

with:

element.class
{
    about: graph(
        triple(s1, p1, o1),
        triple(s2, p2, o2),
        triple(s3, p3, o3)
    ) !add;
}


Also, to explore what these unfolding ideas could look like for more intricate, real-world tasks, I created a second example showcasing transforming data from an HTML table.

This second example is syntax-highlighted here: https://github.com/w3c/csswg-drafts/issues/1594#issuecomment-4235095851 and is also available below.

For the following HTML document content, a table:

<table id="t1" class="data-1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

the following semantics:

@prefix example: <http://www.example.org#> .

<#t1> example:hasData (
   [ example:hasPart1 "1" ; example:hasPart2 "2" ; example:hasPart3 "3" ; example:hasPart4 "4" ]
   [ example:hasPart1 "5" ; example:hasPart2 "6" ; example:hasPart3 "7" ; example:hasPart4 "8" ]
   [ example:hasPart1 "9" ; example:hasPart2 "10" ; example:hasPart3 "11" ; example:hasPart4 "12" ]
) .

are intended to be obtained by means of the following additive CSS sketch:

@namespace rdf url('http://www.w3.org/1999/02/22-rdf-syntax-ns#');
@namespace example url('http://www.example.org#');

table.data-1
{
    counter-reset: row;

    &:not(:has(tr))
    {
        document-about: triple(self(), url(example|'hasData'), url(rdf|'nil')) !add;
    }

    &:has(tr)
    {
        document-about: triple(self(), url(example|'hasData'), bnode('list')) !add;
    }

    & tr:first-of-type
    {
        document-about: triple(bnode('list'), url(rdf|'first'), self()) !add;
    }

    & tr:last-of-type
    {
        document-about: triple(self(), url(rdf|'rest'), url(rdf|'nil')) !add;
    }

    & tr:alias('r')
    {
        counter-increment: row;

        document-about: triple(alias('r'), url(rdf|'first'), bnode(counter(row))) !add;

        & + tr:alias('r-next')
        {
            document-about: triple(alias('r'), url(rdf|'rest'), alias('r-next')) !add;
        }

        & td:nth-child(1)
        {
            document-about: triple(bnode(counter(row)), url(example|'hasPart1'), content('text')) !add;
        }

        & td:nth-child(2)
        {
            document-about: triple(bnode(counter(row)), url(example|'hasPart2'), content('text')) !add;
        }

        & td:nth-child(3)
        {
            document-about: triple(bnode(counter(row)), url(example|'hasPart3'), content('text')) !add;
        }

        & td:nth-child(4)
        {
            document-about: triple(bnode(counter(row)), url(example|'hasPart4'), content('text')) !add;
        }
    }
}

I've been using the property name "about" (formerly "metadata") to indicate per-element graphs and "document-about" to indicate a document-level graph.

The example, above, shows my current thinking with respect to how attaching semantics to markup with style might look for more intricate, real-world tasks like transforming data from HTML tables.

It's an interesting puzzle... Thank you for any comments, feedback, or ideas.


Best regards,
Adam

________________________________
From: Adam Sobieski <adamsobieski@hotmail.com>
Sent: Tuesday, April 14, 2026 7:10 AM
To: danbri@gmail.com <danbri@gmail.com>
Cc: Martynas Jusevičius <martynas@atomgraph.com>; W3C Semantic Web IG <semantic-web@w3.org>
Subject: Re: Adding Semantic Metadata to Webpages' Elements via CSS Selectors

Dan,

While the issue was created back in 2017, fantasai added a "css-cascade-7" label to the issue on January 8, 2024. So, optimistically, the issue is open and still being considered in that context [1][2].

Interestingly, Additive CSS ideas go back even further before 2017. For example, here is a 1999 email: https://lists.w3.org/Archives/Public/www-style/1999Oct/0025.html .

Yes, without any Additive CSS features, a "metadata" property's value would be limited to holding only one statement. Without this expressiveness, I would have to try to create a workaround...


Best regards,
Adam

[1] https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22css-cascade-6%22&page=2

[2] https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22css-cascade-7%22


________________________________
From: Dan Brickley <danbri@danbri.org>
Sent: Tuesday, April 14, 2026 6:31 AM
To: Adam Sobieski <adamsobieski@hotmail.com>
Cc: Martynas Jusevičius <martynas@atomgraph.com>; W3C Semantic Web IG <semantic-web@w3.org>
Subject: Re: Adding Semantic Metadata to Webpages' Elements via CSS Selectors


Are they still working on this and looking for proposals or usecases? The issue is from 2017.

It would be worth walking through how you would add a multi-triple block of rdf, since there is only so much that can be squeezed into a single triple.

Dan

On Tue, 14 Apr 2026 at 10:52, Adam Sobieski <adamsobieski@hotmail.com<mailto:adamsobieski@hotmail.com>> wrote:
Martynas Jusevičius,

Hello. There are some similarities but also some differences. Differences between RDFa and the indicated technique include:


  1.
RDFa requires adding attributes to HTML document markup to indicate and express semantic metadata. The indicated technique allows statements, graphs, and/or datasets to be attached to documents' elements by means of these elements being selected using CSS. So, no extra markup or attributes are required for the indicated technique (aside from, in some cases, style classes using the class attribute).

     *
The indicated technique allows selecting elements by their attributes, attributes' values, class names, IDs, types, and more. It should work with simple, compound, complex, and relative selectors as well as lists of these.

  2.
RDFa adds semantic metadata to HTML documents within the HTML documents themselves. In the indicated approach, semantic metadata could be expressed within <style> elements in the documents or in external stylesheets. As considered, elements would be able to have a style property named "metadata" which would, per Additive CSS, be able to hold zero, one, or multiple semantic statements (i.e., graphs or datasets).


Best regards,
Adam Sobieski


________________________________
From: Martynas Jusevičius <martynas@atomgraph.com<mailto:martynas@atomgraph.com>>
Sent: Tuesday, April 14, 2026 4:10 AM
To: Adam Sobieski <adamsobieski@hotmail.com<mailto:adamsobieski@hotmail.com>>
Cc: W3C Semantic Web IG <semantic-web@w3.org<mailto:semantic-web@w3.org>>
Subject: Re: Adding Semantic Metadata to Webpages' Elements via CSS Selectors

Wasn't RDFa created for this purpose?

https://www.w3.org/TR/rdfa-primer/


On Tue, Apr 14, 2026 at 9:16 AM Adam Sobieski <adamsobieski@hotmail.com<mailto:adamsobieski@hotmail.com>> wrote:
Semantic Web Interest Group,

Hello. I'm excited to share a new idea with the group that I recently posted in a CSS WG issue comment: https://github.com/w3c/csswg-drafts/issues/1594#issuecomment-4235095851 .

Succinctly, the idea is a means for adding semantic metadata to webpages' elements via CSS selectors. It is a potential use case for the Additive CSS proposal.

I hope that the idea is of some interest. Thank you.


Best regards,
Adam Sobieski
http://www.phoster.com