I"ve one heading we can call we are display it inside H3 tag.
So we need to add line break so it will be like bellow example. can please help to get it resolve:
<h3>This (Line Break) is (Line Break) heading</h3>
Note:
<br/> , /n
is not working
Use <br> inside the <h3> tag
<h3>
test <br>
test <br>
test
</h3>
Related
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
I checked for similar questions and but I couldn't find answer for mine.
I need to collect the text value comes inside a h1 tag, as per the example value "text1", which comes in 3 different situation. I am sharing all 3 html codes below:
First Case:
<h1 class="h1">
text1
<br>
<span>text2</span>
</h1>
Second Case:
<h1 class="h1">
<span>text1</span>
</h1>
Third Case:
<h1 class="h1">
<br>
text1
<span>text2</span>
</h1>
I used the xpath
//h1[#class="h1"]/text()[1]|//h1[#class="h1"]/span[1]
But it select the <br> tag in the third case. Is there anyway, I can ignore the break tag and get the text1 value in all 3 cases?
Try this:
//h1/descendant-or-self::text()[normalize-space()][1]
It selects the first descending text node of h1 that is not empty or contains only whitespace.
for example, you want to select all heading tags no matter in h1, or h2, or h3, or others for following-sibling.
What do you do?
Tried:
.//following-sibling::h*
.//following-sibling::[h3|h4]
.//following-sibling::(h3|h4)
.//(following-sibling::h3|following-sibling::h4)
None of them working....
updates:
Here is my html trying to search:
<h3 class='title'>title1</h3>
<p> paragraph 1<p>
<p> paragraph 2<p>
<p> paragraph 3<p>
<h3 class='title'>title1</h3>
<p> paragraph 1<p>
<p> paragraph 2<p>
<h4 class='title'>title1</h4>
<p> paragraph 1<p>
<p> paragraph 2<p>
<p> paragraph 3<p>
<p> paragraph 4<p>
<h2 class='title'>title1</h2>
<p> paragraph 1<p>
<p> paragraph 2<p>
<p> paragraph 3<p>
so there might be randomly 2-5 paragraph between each heading, and the heading can be h2, h3, or h4.
Given a heading element, collect all the paragraphs until the next heading.
(My approach was to find the next heading and going back to find all paragraphs.)
I would generally use
following-sibling::*[self::h3|self::h4]
Use of the self axis is generally preferable to testing name() because it avoids namespace complications, and it's probably easier for a processor to optimize.
I struggle so much on this problem, hence want to post this question and answer to help others.
Answer:
**
.//following-sibling::node()[name()="h3" or name()="h4"]
**
You are welcome.
Inserting a br tag within a header tag (e.g. h2) inserts a space after the first word.
How do I remove that space as I am right-aligning the text?
e.g.
<h2>
hello
<br/>
world
</h2>
http://jsfiddle.net/4er7r/
It isn't the br tag itself, but the returns surrounding it. They are translated to whitespace. Use this:
<h2>
hello<br/>world
</h2>
http://jsfiddle.net/4er7r/3/
Probably my CSS knowledge is limited, but I don't uderstand this:
<p style="color: green">
<p style="color: red">This is red</p>
This should be green. But it's not.
</p>
The second line will render in black ignoring the "color:green". Why?
I tested it in Chrome 28 and Firefox 22.
You can't nest paragraphs.
Paragraph is an auto-closing element, the </p> is optional - any block element will automatically close the last open <p>.
This is what's happening:
<p style="color: green">
</p> <!-- auto-closed paragraph -->
<p style="color: red">
This is red
</p>
This should be green. But it's not.
</p> <!-- here you have syntax error -->
You cannot nest <p>'s. A paragraph's end tag may be omitted if it's followed with another paragraph. This means that in your code, the first paragraph contains no text, the second one contains "This is red". Then there is some text "This should be green. But it's not." which has no style and a closing </p> tag, which has no opening tag.
check: http://www.w3.org/TR/html-markup/p.html
Paragraph can't be nested within another paragraph or block element.
When your code is rendered in the browser it is rendered as like below
<p style="color: green"></p>
<p style="color: red">
This is red
</p>
This should be green. But it's not.
<p></p>
So you can see, there is no wrapper to the last sentence as a result the default css color i.e black is being applied on that.