Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to target the class has-translucent-status-bar which is located inside another class named platform-ios
For that I've tried to do:
.platform-ios > .has-translucent-status-bar
So far, I was not lucky enough to do so, here is a screenshot of the code:
You should go with:
.platform-ios .has-translucent-status-bar
The child selector/combinator you used is for direct children:
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
In your specific case, the only, or one among the others, direct child of .platform-ios is ion-app element.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I saw online that using the :not() selector in CSS makes it so that whatever class you specified in the parenthesis will not apply those properties too. But that doesn't seem to be the case for me. For example,
.test .btn div:not(.classtoavoid){
...
...
...
}
So when I do what I showed above, it doesn't apply those properties to the .btn class where they don't have the div with class (classtoavoid). Am I using the :not selector incorrectly?
No
.test .btn div:not(.classtoavoid){
...
...
...
}
This does not select the .btn class, it selects any div which is a descendant of .btn which does not have the selected class.
You can't apply CSS to a parent based on a child (at least not yet).
You want :has() but that basically has almost (actually none) no support as yet.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
This is the page I am working with: https://books.fcostry.cz/
What I am trying to do is hide the searchbox (.vc-searchbox) on hover of the Books logo on the left upper side (.vc-headerlogo).
.vc-headerlogo:hover .vc-searchbox{ display:none; } is not working and I really don't know why.
I would like to do it using CSS but I am open to any solution. Thanks for any answer.
.vc-headerlogo:hover .vc-searchbox{display:none;}
Means that .vc-searchbox nested in .vc-headerlogo will not be displayed when overing .vc-headerlogo
In your page, this is not the case: .vc-searchbox is not in .vc-headerlogo, but after (they are sibling). In that case, use the CSS sibling selector +
In other words,
.vc-headerlogo:hover+.vc-searchbox{display:none;}
should work better
Since you are open to options, use jQuery
$(document).ready(function(){
$('.vc-headerlogo').hover(function(){
$('.vc-searchbox').hide();
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have used a p tag inside a div tag:
div{background-color:#3B3B3B;}
p{float:left;}
The background-color of div does not appear in the image:
How to solve this?
Using float on a child will cause the parent to collapse. There are many alternative solutions, see How do you keep parents of floated elements from collapsing?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Element type descendant selection works:
form * div {...}
but I find that using classes does not:
.my-class1 * .my-class2 {...}
I.e. I expect a few elements to be selected by the "class descendant" selection form, but none are.
In my page I have two very similar DOM sub-structures generated by third party code that needs different styling, and I don't want my CSS to relying on that third party DOM structure.
What is the best way to style these two parts of the DOM?
You can use .my-class1 > .my-class2 to direct descendants.
Or you can use .my-class1 .my-class2 for any .my-class2 that is descendant of .my-class1.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
On some elements i can use the NTH-child selector, which is an 2nd level element (parent > child)
but in the child ive got a 3rd level element (parent > child > child) which i cant seem to trigger with selectors individually. it only triggers all of them or none.
first of all you should use id only once in html.If you want what you have now you should use class not id.
second of all you only have one innerblock in your block div.so instead of innerblock:nth-child(1) you can use innerblock.
section#top .block .innerblock{
background: #ddd !important;
}
fiddle
UPDATE :
if you want to change .innerblocks seperatly for eatch block.use this css
section#top .block:nth-child(1) .innerblock{
background: #ddd !important;
}
fiddle