Change Heading 2 in Tiddler Body to Bold and Underlined but Not in Other Places

1

I like to change heading 2 in my TW text body (tiddler body), but not on tiddler title or control panel plugin/theme info nor anywhere eles

I tried

.tc-tiddler-body h2,
.tc-tiddler-preview-preview h2{
	font-weight:500;
	font-size:1.1em;
	color: #000;
	text-transform: none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	padding-bottom: 5px;
}

But this makes all h2 on control panel and plugin info card underlined bold,…

What solution do you propose?

Why the below CSS does not work?

.tc-tiddler-body :not(.tc-plugin-info-chunk, .tc-plugin-info-description) h2,
.tc-tiddler-preview-preview h2{
	font-weight:500;
	font-size:1.1em;
	color: #000;
	text-transform: none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	padding-bottom: 5px;
}
2

Please try this selector

body > div.tc-page-container-wrapper > div > div > div > section > div > div.tc-tiddler-body.tc-reveal > h2

You need to make your selector more specific.

Please play around with the selector I posted above. For example, I think you can remove body.

3

I think the below should work

.tc-tiddler-body > h2,
.tc-tiddler-preview-preview > h2{
	font-weight:500;
	font-size:1.1em;
	text-transform: none;
	color: #000;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	padding-bottom: 5px;
}

but if you look for :not pseudo class selector solution, then wait to see what @telumire will say :wink:

4

Try this :

.tc-tiddler-body h2:not(.tc-tiddler-system h2){
color:red;
}

Your selector didn’t work because some of the ancestors doesnt match with the :not selector, and thus the rules is applied. To get more reliable results with ancestor matching, the negation has to be done on the element itself.

EDIT: Apologies, I missread.

.tc-tiddler-body :not(.tc-plugin-info-chunk, .tc-plugin-info-description) h2{

This target elements inside the body of a tiddler, that are not a plugin, then the h2 that are inside.
This wont match a h2 inside a normal tiddler, unless it’s contained in something :

image
image802×397 11.1 KB

Demo

See also: Selectors Level 4

5

This is very small and works great!

Perfect as always! Thank you @telumire

6

Thank you all!

I choose the solution by @telumire.

7

I just thought I would add alternative methods to achieve something similar.

Here you apply a class to any heading or other elements as needed.

Add the following to a tiddler tagged $:/tags/Stylesheet containing’

.b { font-weight: bold; }
.bu { font-weight: bold; text-decoration-line: underline;}
  • This basically defines two classes, one called b for bold and another bu for bold underline.
  • Then assign the class when using the heading
!.b test
!!.bu test
!!! three
<h2 class="bu">Heading</h2>

There may also be a way using the tiddlers class field