I have the following code
<p>Test
<sup>1</sup>
<sup>, 2</sup>
</p>
Which are displayed like 1 , 2. When I try apply some style I don't know where, since no margins or paddings are set. So, which style should I apply for all but the first sup?
You can try just using one sup. If you need two, you can also try applying a negative margin on sup. Since you don't need it on the first-child but need it on all other children, use this:
p > sup:not(:first-child) {}
See it working here:
p>sup:not(:first-child) {
margin-left: -4px;
}
<p>Test
<sup>1,2,</sup>
<sup>3</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4</sup>
</p>
<p>Test
<sup>1,</sup>
<sup>2,</sup>
<sup>3,</sup>
<sup>4,</sup>
<sup>5,</sup>
<sup>6,</sup>
<sup>7,</sup>
<sup>8</sup>
</p>
Does this solve your problem ?
<p>
<sup>1, 2</sup>
</p>
If you have to use two elements, then try
<p>test
<sup>1</sup>
<sup style="margin:0; margin-left:-5; padding:0;">, 2</sup>
</p>
I hope I could help you, otherwise I'll need some more info.
Just place the comma inside the first <sup> element rather than in the subsequent ones like so:
<p>Test
<sup>1,</sup>
<sup> 2</sup>
</p>
Related
I know that I can use <br> for a simple line break. I also know that I can add indentation by adding styling to a <p style="margin-left:12px">.
Now I have a problem, which is that <p> breaks two lines, it is almost like inserting <br><br>.
I cannot apply styling to <br> and also am unable to figure out how to prevent the double line break from <p>.
Is there something like an element that does not break lines or similar? No matter what element I add to apply styling, they have that double line break, e.g. div.
The Look
What I want
some text
some other text
even more text
What I was able to achieve
This is what I get using three <p> with margin-left styling:
some text
some other text
even more text
This is what I can achieve with br:
some text
some other text
even more text
Try using span elements with float: left; clear: both; and then use whatever margin-left you want.
You can use this trick to achieve your goal
span{
display:block;
text-indent:12px;
}
span samp{
display:block;
text-indent:24px;
font-family:initial;
}
<p>
Some text
<span>
Some other text
<samp>Some other text</samp>
</span>
</p>
A <p> (paragraph element) is a block-level element. This means, on default it will be positioned in a new row.
That's why you see a double linebreak.
So therefor, use inline elements like <span> to move the text to the right.
<p>some text<br/>
<span style='margin-left:12px'>some other text</span><br/>
<span style='margin-left:24px'>some more text</span></p>
Deleting margins (margin-top and margin-bottom, most importantly) from p elements make them act like lines of text one below another and then use of <br> creates single linebreak. However if you want to add margin-left based on position of given p you can't do this without any SCSS or hard coding values for child number 1, 2, 3 and so on. Other posts on SO about same problem:
Post 1, post 2, post 3.
p {
margin: 0;
}
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
<br>
<p>test test test test test test test test test</p>
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.
Let's suppose I have the following paragraphs:
<p>one two </p> <p> three </p><p> four five </p>
Now let's suppose I want to style the words two, three, and four green, in place, without having any other effect on the document's structure or other layout. I basically want a <span> that transcends block level elements like <p>s. How can I accomplish this most simply? I could
<p>o <span>t</span></p><p><span>t</span></p><p><span>f</span> f</p>
But that makes things really messy due to the fact that I employ a markdown parser and have my own custom preprocessing code. What could I do so that there's only one "style begin" mark, and only one "style end" mark per contiguous length of green text?
You can have your text wrapped in a single <p> </p> and have a <span> inside that wrapping around the text you want to style, so:
<p>one <span>two three four</span> five</p>
http://jsfiddle.net/asbd9rdj/
edit
To target specific words in your multiple <p></p> tags, use a <span></span> as an inline element so you can attach styles to it.
<p>one <span>two</span></p>
<p>three <span>four</span></p>
example here: http://jsfiddle.net/79be8L6L/
"Interleaving" HTML tags is invalid. You should use 3 separate <span> tags, like in your second example.
Making your HTML generator handle this is unfortunately a necessary complexity in order to produce proper HTML.
I would like to select elements between h1 tags. For example, I would like to apply a style to all p between the h1#bap and the next h1, while not changing the style at any other places.
No other tags should be added (otherwise, it'd be too easy :) ).
Can't use any nth-sibiling as elements between headers can be trillions.
Obviously, I may want to apply style between other headers as well (between specific h2,...).
<h1 id="bap">bap</h1>
<p>foo bap</p>
<p>foo bap 1</p>
<p>foo bap 2</p>
<p>foo bap 3</p>
<p>foo bap 4</p>
<div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
<p>balibom</>p
You can use a lesser know selector formally called the Sibling combinator (well, I think that's it's name anyway!)
Using this syntax, you can select all p elements after <h1 id="bap">bap</h1>:
#bap ~ p { color: red; }
Unfortunately, this selects all paragraph elements after <h1 id="random-bor">random bor</h1>
too, but this can be overcome by resetting the styles of those paragraph elements like such:
#random-bor ~ p { color: black; }
See this fiddle
This works in every modern browser, unfortunately it doesn't work in IE6, if that's an issue then a jQuery solution would probably be best.
h1#bap + p{color:red}
This works for the first p tag. Need to find the way to apply for all the tags. This is what I got for now
I was going to suggest to add some <div>s around each section, until I read the bit where you said no other tags should be added.
You can't do it with css alone, but you could use some JavaScript to implement this algorithm:
Loop through all the elements of the page.
When you see a <h1>, remember it's id.
For every <p>, give it a class that corresponds to the last <h1>'s id.
You should end up with something like this, which you should be able to style easily with css.
<h1 id="bap">bap</h1>
<p class="bap">foo bap</p>
<p class="bap">foo bap 1</p>
<p class="bap">foo bap 2</p>
<p class="bap">foo bap 3</p>
<p class="bap">foo bap 4</p>
<div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
<p class="random-bor">balibom</>p
Then you can style things like this:
p.bap {}
p.random-bor {}
Can only be done with javascript, if you're using jquery it would look like
$('h1#bap').nextUntil("h1#random-bor",'p').css('background','red');
Edit:
How to select all content between two tags in jQuery
this explains exactly what you would like to have done
Edit2:
there is also a jquery function
http://api.jquery.com/nextUntil/
Looking at the CSS3 specs, I can't find any way to select any element that has no children.
Let me explain.
<body>
<h1>Main Page</h1>
<div id="main">
<div class="post">
<h2>Article 1</h1>
<p>some text</p>
</div>
<div class="post">
<h2>Article 2</h1>
<p>some text</p>
</div>
</div>
</body>
I'm looking for a CSS syntax to select the h1, the two h2 and the two p. A way to select in any page, all elements with no children.
Any suggestion ?
Sorry, I forgot to add the "empty" part, I am actually already using the *:empty selector, but it's not working for any tag that has a nodeText as a child. So it's working for any input, image, object, but not for h2, h1, or any p.
As a text node is also a node for CSS you cannot do it with any CSS selector. Doing it with JavaScript you should first select all nodes with only one child and than test if it is only a text node.
Use the :empty pseudo to do the trick, e.g. to select ALL elements with no children (including no text nodes... nothing):
*:empty
I don't think this can be done with CSS alone. You would have to loop through all elements testing for a false return on hasChildNodes(). It would be sloppy and not something I would recommend.