Combining multiple css selectors

Question

Hi everyone! now I was trying to implement some tag based styling in Harlowe 2. Modyfing the main passage was relatively easy, using this code:

tw-passage[tags~="marble"] {
    background-image: url("http://i.imgur.com/0N6fsaD.jpg");
}

The problem is that passages with special tags (header in my case) are not affected by it, even if they have the "marble" tag.

Playing around I found a way to affect them with:

tw-passage tw-include[type="footer"] {
	background-image: url("http://i.imgur.com/0N6fsaD.jpg");
}

So really the problem is: how do I chain the two selectors so that I'm able to affect even special passages by switching their normal tags around?

Answer 1

If you use your web-browser's built in Developer Tools to Inspect the HTML being generated for the page you will notice that a Passage Tag only gets appended to two elements: tw-story and tw-passage. You will also notice that tw-sidebar and both header and footer tw-include elements are children of the tw-passage element.

You can use a hierarchical CSS selector to target the header (or footer) tw-include element of a tagged tw-passage (or tw-story) element like so:

/* Style the whole passage content. */
tw-passage[tags~="marble"] {
    background-color: Bisque;
}

/* Override the style of the header section. */
tw-passage[tags~="marble"] tw-include[type="header"] {
    background-color: CornflowerBlue;
}

 

You will notice that by default the width of a header (or footer) tw-include element is only large enough to display the content, so it may not cover the whole width of the tw-passage element. You can use CSS like the following to fix this issue.

/* Change the header to cover the whole width of the passage area. */
tw-include[type="header"] {
	display: block;
}

 

Comments

Dang I tried something very similar, but did not get the syntax right. Thank you it worked perfectly.