i'm trying to access the last occurrence of an element and within that element the first occurrence of another element. So here I'm trying to access the last article tag and the first p tag following that.
<div class = "wrapper">
<article class = "article-info">
<h3>Test1</h3>
<p>Lorem Ipsum.</p>
</article>
<article class = "article-info">
<h3>Test2</h3>
<p>Lorem Ipsum.</p>
</article>
<article class = "article-info">
<h3>Test3</h3>
<p>Lorem Ipsum.</p>
</article>
<div/>
I know I can access the last article by using 'last-child', but is it possible to nest another pseudo-classes to access the first p element? Thanks!
You can use :last-of-type and :first-of-type. This will work even if there are elements after the last article or before first p tag
.wrapper article:last-of-type p:first-of-type {
background: red;
}
<div class="wrapper">
<article class="article-info">
<h3>Test1</h3>
<p>Lorem Ipsum.</p>
</article>
<article class="article-info">
<h3>Test2</h3>
<p>Lorem Ipsum.</p>
</article>
<article class="article-info">
<h3>Test3</h3>
<p>Lorem Ipsum.</p>
<p>Lorem Ipsum.</p>
</article>
<div>Hello</div>
<div/>
Related
So I have an <h2> element and a <p> right below it and I'd like to space them out a little bit. Currently I'm just using a <br> between them but I was wondering if there's a way to do it in CSS? It can be applied to all the <h2> and <p> elements on my page. Thanks!
you can control line-spacing in one HTML tag only. So if you have
<h2 style="line-spacing:40px;">Hello World</h2>
<p>Lorem ipsum</p>
It will only affect the <h2> "Hello World" and not the <p> tag with the text Lorem Ipsum. You need to give the a margin-bottom such as this:
<h2 style="margin-bottom:40px;">Hello World</h2>
<p>Lorem ipsum</p>
I was wondering if there is a way to generate an anchor for each of my headings. I was hoping to achieve the following using Pug:
h2 Some heading
process into
<div id="some-heading">
<h2>Some heading</h2>
</div>
Is there an option to do this in Pug?
This is a great opportunity to use a mixin, with javascript to transform your headline into an id-safe string.
Additionally, you can add a level parameter and use tag name interpolation to support multiple levels of headings.
Mixin:
mixin h(level, headline)
- let id = headline.toLowerCase().replace(' ', '-').replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\#\[\\\]\^`\{\|\}~]/g, '');
section(id= id)
#{'h' + level}= headline
if block
block
Usage:
+h(2, 'Section A')
+h(2, 'Section B')
p Lorem ipsum dolor amit
+h(2, 'Section C')
p Lorem ipsum dolor amit
+h(3, 'Section C, Subsection A')
p Lorem ipsum dolor amit
Compiles to:
<section id="section-a">
<h2>Section A</h2>
</section>
<section id="section-b">
<h2>Section B</h2>
<p>Lorem ipsum dolor amit</p>
</section>
<section id="section-c">
<h2>Section C</h2>
<p>Lorem ipsum dolor amit</p>
<section id="section-c-subsection-a">
<h3>Section C, Subsection A</h3>
<p>Lorem ipsum dolor amit</p>
</section>
</section>
Usually you're looping through an array with this sort of thing. Let's assume it's just called headings for the sake of argument.
- var headings = ["Heading1", "Heading2", " Heading3"];
each heading in headings
div(id= heading)
h2= heading
Outputs:
<div id="Heading1">
<h2>Heading1</h2>
</div>
<div id="Heading2">
<h2>Heading2</h2>
</div>
<div id="Heading3">
<h2>Heading3</h2>
</div>
To have a different ID from the heading label you could create an array of objects:
- var headings = [];
- headings.push({ "id": "heading-1", label: "Heading #1" });
- headings.push({ "id": "heading-249", label: "Heading #249" });
each heading in headings
div(id= heading.id)
h2= heading.label
Outputs:
<div id="heading-1">
<h2>Heading #1</h2>
</div>
<div id="heading-249">
<h2>Heading #249</h2>
</div>
Of course, you shouldn't be setting up arrays in your pug template. That should all be done in the route handler before you call res.render in your node/express route handler.
I want to color all my p in blue, except the one inside the no-color div.
I tried p:not(.no-color), :not(.no-color) p, div:not(.no-color) p but I think I misunderstand something
p:not(.no-color) {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
Edit: The HTML code is retrieved automatically, so I can't choose on which elements I apply the classes. I can only stylize in CSS.
You can use something like this if you can't modify the HTML :
.container > p,
.container > div:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="random-class">
<p>Lorem ipsum</p>
</div>
</div>
This selector should work, without modifying the HTML:
:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
(Sorry for my previous, unhelpful answers... I actually tested this one!)
EDIT: Fixed answer
I would place the class on the <p> instead, then p:not(.no-color) would work.
If however, you can't change the HTML structure, you can target <p>s which are descendants of an element with a .no-color class by using the .no-color p selector and then set the color to inherit.
Setting the color to inherit allows you to get the color of the enclosing parent without specifying it.
This technique works for arbitrarily nested <p> elements below a .no-color parent.
p {
color: blue;
}
.no-color p {
color: inherit;
}
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="no-color">
<div>
<p>Lorem ipsum</p>
</div>
</div>
(Addendum: This is Chrome issue 631222, and was fixed in Chrome release 54.0.*.)
With the latest version (53.0.2785.116) of Chrome, on Windows and Mac, we've hit a nasty bug that we can't seem to work around.
We are seeking workarounds that do not involve editing the HTML text, so CSS or Javascript answers might do.
We are getting text at the top of pages other than the first that looks like:
This is an overlay of a paragraph, and two different table headers for tables that occur later on that page. (Where the headers again are printed.)
You can find a full example page here.
We've already reported this to Google, of course, but we were wondering if anybody could think of a workaround to get our customers printing again. We can't change the HTML, but we can change the CSS, or possibly use Javascript. (Removing the thead tags appears to solve the problem, for example, but that solution does not work for us because we can't change the HTML.)
The code is simply:
<!DOCTYPE html>
<html><head>
<title>Broken Printing</title>
</head>
<body>
<h1>Printing Issue 9/29/2016</h1>
<p>Lorem ipsum for page break</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<table>
<thead><tr><th>Survey</th></tr></thead>
<tbody><tr class="odd"><td>The Foundation 2016 </td></tr></tbody>
</table>
<table>
<thead><tr><th>Year</th></tr></thead>
<tbody><tr><td>2015</td></tr></tbody>
</table>
</body>
</html>
We have a workaround:
#media print {
thead {
display: table-row-group
}
}
This loses a feature we don't need much in our reports - repeating of table headers at page breaks - so it is sufficient for us, and is easily removed when Chrome gets fixed.
I'm working on a blog that implements Disqus comments and I'm making an effort to make as much use of HTML5 semantic markups as possible.
Here's an example <article /> (itself within a <section />), fairly simple:
<article class="post">
<header>
<h2>Title</h2>
<p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<!-- blog comments -->
</article>
With the above structure, I'm unsure semantically where to integrate the article's comments.
A <footer /> is clearly not appropriate ("The footer element is not sectioning content; it doesn't introduce a new section.")
Disqus uses async JavaScript to create an <iframe /> to contain the comment widget, so a <p /> doesn't seem appropriate, either.
Am I over-thinking the semantic markup thing: is it best to just stick it into a <div /> and not worry about it?
There is an example in the HTML5 spec for a blog post with comments. Which makes sense, in my opinion.
Your example could look like:
<article class="post">
<header>
<h1>Title</h1>
<p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
</header>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<section>
<h1>Comments</h1>
<article><!-- comment 1--></article>
<article><!-- comment 2--></article>
<article><!-- comment 3--></article>
<section>
</article>
Side note: I think your "posted-on" would better fit into a footer instead of a header. So your header could be omitted because it would only contain the heading. So your example could look like:
<article class="post">
<h1>Title</h1>
<footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<section>
<h1>Comments</h1>
<article><!-- comment 1--></article>
<article><!-- comment 2--></article>
<article><!-- comment 3--></article>
<section>
</article>
You could stick it in its own <section> (rather than a <div>) within your containing <section>, as a sibling of your <article>. But if you're using Disqus, I guess whichever element you use doesn't matter. I don't think it belongs within the article content though. Maybe an <aside> instead?
Just keep in mind that when it comes to semantics, there aren't any hard and fast rules. As long as your document is structured and outlined in a meaningful way, that's what matters.