The reason I ask, is that I am trying to have sections, that I can show and hide with CSS, in a plain Markdown rendered document. The rendered output might be some thing like this:
<h2>Hello</h2>
<p>content</p>
<p>more content</p>
<h2>Hello</h2>
<p>content not in a section</p>
<p>and neither is this</p>
<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>
<h3>Title</h3>
<p>some stuff</p>
<h2>World</h2>
<p>...another paragraph</p>
<h2>Again</h2>
<p>more stuff</p>
<p>...and more</p>
<h2>Again</h2>
And I'd like to be be able to hide/show everything between, and including, the section 1 <h2> tags.
I was thinking of something along the lines of:
h2 ~ p {
...
}
But this will obviously not stop at the next h2 tag. I realise this is probably not possible, but I thought I'd ask just in case I missed anything.
Edit Just to clarify, there could be many h2 elements, and other h? elements as well e.g. h3
Edit I've managed to get something working with the following CSS
h2:nth-of-type(2n+1) {
color: blue;
}
h2:nth-of-type(2n) {
color: red;
}
h2:nth-of-type(1) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(2) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(3) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(4) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(5) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(6) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(7) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(8) ~ *:not(h2) {
color: black;
}
h3 {
color: black;
}
It's gludgy, but then what I'm trying to do with the markdown HTML is fairly gludgy. The colours are standins for the show/hide stuff, just showing that I can target them. See the jsFiddle
Assuming that you can encapsulate the entire generated HTML into a single element (for instance body, or even a div):
<body>
<h2>Hello</h2>
<p>content</p>
<p>more content</p>
<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>
</body>
In your CSS, you can target the h2 elements by using :nth-of-type():
h2:nth-of-type(1) {
color: red;
}
h2:nth-of-type(2) {
color: blue;
}
h2:nth-of-type(1) ~ p {
color: purple;
}
h2:nth-of-type(2) ~ p {
color: orange;
}
See jsFiddle.
Do realize though that this is a rather ugly solution, not sure if it works properly in all browsers that support nth-of-type, and it is source-order dependent.
if you use selector as :not() , it might be a way
http://codepen.io/anon/full/mxasv
for older browser use polyfill/jQuery
to convince you, some links ?
Polyfill for css :target, not(), and [tilde] sibling selectors?
http://api.jquery.com/not-selector/
http://api.jquery.com/not/
Quiet soon , you won't need polyfill/jQuery, CSS2.1 is 15 years old ?
Related
In the following code I expected the title inside the wrapper to be blue but it stays red, I was hoping #custom-selector would act like regular css custom-property?
html
<div class="wrapper">
<h1 id="title">Title</h1>
</div>
css
#use postcss-cssnext;
#custom-selector :--heading h1, h2, h3;
:--heading{
color: red;
}
a:active{
color:hotpink;
}
.wrapper{
:--heading{
color: blue;
}
}
I realised nesting was not suported so
.wrapper :--heading{
color: blue;
works! Duh
This question already has answers here:
Why can't I use a heading tag inside a p tag and style it with CSS?
(5 answers)
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed last year.
I want to override the css of <h1> and <h2> using selector (specific using selector only) but it's not working. It's getting only applied to one class only <h1> color changes to green not <h2>.
Please help can someone tell me where I am wrong. Please help!
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,.temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
Try this:
.temp {
color: blue;
}
.temp2 {
color: red;
}
div .temp,
div .temp2{
color: green !important;
}
<div>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</div>
.temp {
color: blue;
}
.temp2 {
color: red;
}
span .temp, .temp2{
color: green !important;
}
<span>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</span>
Answer:
putting h1/h2 content inside p is invalid (You might have noticed in Stack overflow's snippet editor)
Imagine having a huge heading inside small paragraph
so change to span/div/etc (in html+css)
You have missed to mention the paragraph element for temp2
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,p .temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
I want to output:
.selector.another-selector .selector__block{some declaration}
but i want to nest it:
I am using & at the end so I can nest it under __block,
but how can I make it adjoin class with .selector?
code example:
.selector{
&__block{
// i want to put my .another-selector declaration here
.another-selector &{
//syntax issue
//need to make it .selector.another-selector .selector__block
}
}
thanks in advance.
If you nest your selector, then it has to be in the .selector__block context (&).
You have 2 solutions here :
You can repeat the first selector, as such:
.selector {
&__block {
...
.another-selector.selector & {
// Here `&` means `.selector__block`
}
}
}
You can nest differently:
.selector {
&__block {
...
}
&.another-selector &__block {
// Here `&` means `.selector`
}
}
Maybe the second solution is better since it respects the inception rule and is less dependent of the DOM structure.
BTW, you can also try https://www.sassmeister.com/ to play with your selectors
I would suggest that you don't nest BEM at all. Just go with plain declarations for two valid reasons.
1) error tracking nested BEM is hard, let say you get a class from devtools that is .hero__heading. That will not match anything in your code when doing a search. Now the example above is not that hard to figure out anyway but inheriting a project with nested structure is a pain. I suggest reading Harry Roberts article on code smells in css
2) nesting like this will often complicate when wanting to override with other classes like in your case.
Consider this code:
.selector {
background-color: deepskyblue;
}
.selector__block {
color: lightblue;
.another-selector & {
color: lightcoral;
}
}
#Dejan.S I'm not a big fan of BEM (but that's another rant ;-). If however you are using BEM I think nesting will help to illustrate the hierarchy and what to expect
SCSS:
.selector {
// selector styles
color: red;
// default selector block style
&__block { color: green; }
// selector variant selector block styles
&.foo &__block { color: blue; }
&.bar &__block { color: yellow; }
}
CSS Output:
.selector { color: red; }
.selector__block { color: green; }
.selector.foo .selector__block { color: blue; }
.selector.bar .selector__block { color: yellow; }
HTML:
<div class="selector">
Selector <!-- red -->
</div>
<div class="selector">
Selector <!-- red -->
<div class="selector__block">
Selector Block <!-- green -->
</div>
</div>
<div class="selector foo">
Selector <!-- red -->
<div class="selector__block">
Selector Foo Block <!-- blue -->
</div>
</div>
<div class="selector bar">
Selector <!-- red -->
<div class="selector__block">
Selector Bar Block <!-- yellow -->
</div>
</div>
I'm struggling with a fairly trivial problem I assume, never having had prior experience with CSS. How do I change the placeholder text color of something like this?
<div class="square">
<input class="circle" placeholder="blue" />
</div>
I thought something like this might work, but it didn't
.square{
.circle::-webkit-input-placeholder {
color: blue;
}
}
Also, I would like to know how to accomplish the same if its nested further down the hierarchy. Would it be possible to skip elements in between the target placeholder and the outer element?
To target the .circle element inside a .square element, you want to write :
.square .circle::-webkit-input-placeholder {
Change your syntax to the code below:
.square .circle::-webkit-input-placeholder {
color: blue;
}
<div class="square">
<input class="circle" placeholder="blue" />
</div>
It seems like you've used a SASS syntax.
Hope this helps!
Try this..and check this
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
I'm looking for a neat way to solve the given problem:
Let's say we have an article, and I want to style every h1, h2 in unless they are located in the <div ="example">
<article class="article">
<h1>Direct Child 1</h1>
<h2>Direct Child 2</h2>
<div class="example">
<h1>Example Child 1</h1>
<h2>Example Child 2</h2>
</div>
<div class="other-div">
<h1>Indirect Child 1</h1>
<h2>Indirect Child 2</h2>
</div>
</div>
Now in pure CSS the solution is simple:
.article > h1,
.article *:not(.example) h1 {
color: red;
}
.article > h2,
.article *:not(.example) h2 {
color: blue;
}
All h1s are red, and h2s are blue, unless they're within <div class=example>" - Pen
In LESS, however, I can't find a clean way to do this.
.article {
& :not(.example) {
h1 {
color: red;
}
h2 {
color: blue;
}
}
}
I'm looking for a way to add <div class=article>" direct child h1s and h2 into the mix while keeping it DRY.
I guess the main show-stopper for your attempt is the limitation of Less requiring a selector combinator (like >) to always go before a selector element (so neither & > nor > alone can work).
There's workaround however:
.article {
#-: ~'>';
#{-}, *:not(.example) {
h1 {color: red}
h2 {color: blue}
}
}