Is there any natively supported way of selecting an element based on what it is followed by?
I want to style all h2-tags that are immediately followed by a p-tag. Example:
<body>
<h2>Heading 1</h2>
<h2>Heading 2</h2>
<div>Text</div>
<h2>Heading 3</h2> <!-- Only this one -->
<p>Text</p>
<h2>Heading 4</h2>
<div>Text</div>
<h2>Heading 5</h2>
<div>Text</div>
</body>
Currently this is not possible in CSS, as there are no selectors that will select the previous element.
If you were to use jQuery, something like this would work. (example here)
$('p').prev('h2').css('color','red');
When CSS4 selectors are supported, I believe you will be able to achieve this.
I would simply use a class if I were you and I didn't want to use jQuery.
CSS
.h2-with-p{}
HTML
<body>
<h2>Heading 1</h2>
<h2>Heading 2</h2>
<div>Text</div>
<h2 class="h2-with-p">Heading 3</h2> <!-- Only this one -->
<p>Text</p>
<h2>Heading 4</h2>
<div>Text</div>
<h2>Heading 5</h2>
<div>Text</div>
</body>
Related
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 8 months ago.
I'm trying to use pseudo-selectors rather than tag things with an individual ID if I can help it, as I have been led to believe that this is better coding.
I have three text containers, and I would like the middle one to have a different background colour for design purposes. Whichever pseudo-selector I use, I unable to select only the container, and not its children. Having experimented with nth-of-type and nth-child, I can either select the container as well as text within it, or select the container as well as text within another container.
How do I use a pseudo-selector to select only the middle container and not its contents?
My code:
<section id="section">
<span class="container">
<h3>Heading 1</h3>
<p>Text</p>
</span>
<span class="container">
<h3>Heading 2</h3>
<p>Text</p>
</span>
<span class="container">
<h3>Heading 3</h3>
<p>Text</p>
</span>
</section> ```
Css:
#section :nth-child(3) {
background-color: red;
}
The problem with using #section :nth-child(2) is that every element that is the second child of any element within #section is selected. Hence you get all the texts given red background color.
There is also a problem with having divs etc within a span element. For more detail on this see for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
This snippet changes the spans to divs and makes sure that only those elements that are direct children of section are selected by using the > selector.
#section> :nth-child(2) {
background-color: red;
}
<section id="section">
<div class="container">
<h3>Heading 1</h3>
<p>Text</p>
</div>
<div class="container">
<h3>Heading 2</h3>
<p>Text</p>
</div>
<div class="container">
<h3>Heading 3</h3>
<p>Text</p>
</div>
</section>
I am trying to add a padding-bottom to an div class="col-md-4" directly without using css. Is it possible?
I tried this code
<div class="col-md-4 padding-bottom:15px">
also
<div class="col-md-4" "padding-bottom:15px">
full content code is
<div class="gal">
<div class="container">
<div class="col-md-12 no-padding">
<div class="row">
<div class="grid clearfix">
#foreach($albums as $album)
<div class="col-md-4">
<figure class="effect-julia"> <img src="{{$album->gallery->imageUrl(null,300,239)}}" alt="czcsdcsd -{{$album->name}}"/>
<figcaption>
<h2>{{$album->name}}</h2>
<div>
<p>View More</p>
</div>
View more </figcaption>
</figure>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
it does not change anything.please help
<div class="col-md-4" style="padding-bottom:15px"></div>
Just use the attribute style, but I have to say using CSS in the HTML directly is not the best way...
Also, you can use bs4 classes like pb-number for setting padding-bottom, or pt-number for setting padding-top where number is number from 0 to 5 (or auto) which is equivalent to values in rem from .25rem to 3rem.
In your case, you can use class="pb-1" for example.
You can find out more in the official documentation of bootstrap4:
I'm trying to add a drop-cap feature using css selectors first-of-type and first-letter.
This is for a WordPress site and the issue I'm having is that some posts could be build using visual composer while others could be built using the standard editor.
That means that the inner html structure of the content changes (divs are added) and my css rule .post_content > p:first-of-type:first-letter { font-size: 24px } doesn't work any more.
<div class="post_content">
<p>Hello world</p>
<p>Another line</p>
<p>Another line</p>
<p>This shouldn't be dropcaped</p>
<p>Another line</p>
<p>Another line</p>
</div>
becomes
<div class="post_content">
<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Hello world</p>
<p>Another line</p>
<p>Another line</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>This shouldn't be dropcapped</p>
<p>Another line</p>
<p>Another line</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If i remove the immediate children selector (>) all paragraphs get the style applied.
Is there something I'm missing ? Is there any way I could achieve the desired effect ?
Thanks!
PS: Actually, the simplified version works, I just tested it in a fiddle. But the real html is this:
https://jsfiddle.net/s8ajo1hw/
and you can see the issue with the <p> tag being selected multiple times.
PPS: After a bit of fiddling, I found out that the issue was from p nested in separate divs that are nested in the main post_content. Simplified version: https://jsfiddle.net/9v9j3amz/
As you can see from the fiddle, the behaviour is quite weird.
Any insight on why this happens is much appreciated!
Just use:
.post_content:first-letter{
font-size:34px;
color: red;
}
The complex query was not working because :first-letter applies the style on the first letter from the selector.
I hope it helps you to achieve desired effect. Add this CSS to your stylesheet..
div.post_content * > p:first-of-type:first-letter {
font-size: 24px;
}
It will select all nested elements no matter how many. This asterisk * is a wildcard here.
Update:
I have tinkered a bit with your code but actually there are way too many nested elements and they can grow. So if you don't mind javascript add this snippet to the end of your file. Will solve your problem pretty good for now. Work on your both fiddles.
<style>
.my-class:first-letter {
font-size: 60px;
}
</style>
<script>
var el = document.getElementsByClassName("wpb_wrapper")[0].getElementsByTagName("p")[0];
el.className = 'my-class';
</script>
Since ::first-letter applies to the "first letter of the first line of a block-level element" you can just target the .post_content:
.post_content:first-letter {
font-size: 48px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
demo: https://codepen.io/anon/pen/KqZYgy
can you tell me where's the problem with my code in IE?
http://dv-projects.bluefile.cz/huno/
Slideshow does not work. Seems like a problem with CSS.
IE version: 11.0.2
HTML:
<div class="slider-wrapper">
<article class="slider">
<div class="slide-1">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Nový produkt v nabídce</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-2">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Novinka na trhu!</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-3">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Kvalita a spolehlivost zaručena</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slider-radio-buttons">
<div class="on slide1"></div>
<div class="off slide2"></div>
<div class="off slide3"></div>
</div>
</article>
</div>
Thanks
Absolutely positioned elements aren't affected by the parents opacity being set to 0. In order to resolve this, set the opacity on the children to "inherit":
.slider-image,
.slider-info {
opacity: inherit;
}
This appears to have resolved the issue for me in IE11.
As was pointed out in the comments above, your document is getting loaded into Quirks mode in some older versions of Internet Explorer. It appears to be the result of the Mark of the Web:
<!-- saved from url=(0014)about:internet -->
This should go below your Doctype, as demonstrated in the linked documentation:
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
Currently working on a site template rebuild in HTML5 and with trying to keep in line with semantic best practices the markup is getting completely bloated with divs for what I would deem non page relevant content. Here's the markup I'm currently working with for a rather large page footer block containing various info panels:
<footer class="container">
<div class="footer-info-panel left">
<div class="contact-details">
<div class="heading">Contact Us</div>
<div class="content"></div>
</div>
<div class="follow-us">
<div class="heading">Follow Us</div>
<div class="content"></div>
</div>
<div class="bookmark">
<div class="heading">Bookmark & Recommend Us</div>
<div class="content"></div>
</div>
</div>
<div class="footer-info-panel right">
<div class="payment-methods">
<div class="heading">Payment Methods</div>
<div class="content"></div>
</div>
<div class="customer-services">
<div class="heading">Customer Services</div>
<div class="content"></div>
</div>
<div class="company-info">
<div class="heading">Company Information</div>
<div class="content"></div>
</div>
</div>
</footer>
So adhering to OOCSS techniques in SASS with minimal stylesheet nesting I can simply define global footer styles as .footer-info-panel .heading { styles here } etc, however should I be using one of the h1-h6 tags, it seems like div overkill yet my interpretation of the the html5 spec would say otherwise as it's not relevant page content?
Straight from the HTML5 spec:
Some site designs have what is sometimes referred to as "fat footers"
— footers that contain a lot of material, including images, links to
other articles, links to pages for sending feedback, special offers...
in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat
footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · Part 2</p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? Read more...</p>
</section>
<ul>
<li> About us...
<li> Send feedback!
<li> Sitemap
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
Terms of Service</small></p>
</footer>
</body>
As Jared you may use the aside or section elements.