I'm working with WordPress and have been killing myself tonight with this CSS. I finally have gotten things to work as follows however I'm sure there's a way to clean it up. I've tried several articles without luck, formatting and reformatting. Anyways, here's my code:
.postid-5648 #masthead {
display: none;
}
.postid-5648 #colophon {
display: none;
}
.postid-5365 #masthead {
display: none;
}
.postid-5365 #colophon {
display: none;
}
I've tried things like this, without luck:
.postid-5648, .postid-5365, #masthead, #colophon {
display: none;
}
Thanks in advance!
Grouping selectors - If more than one CSS selectors have same CSS declarations, they can be grouped together.
selector1, selector2, selector3,.................................. selectorN
{property : value; .......... }
Where selector1, ......... selectorN are different selectors. Notice that here selectors are separated with ","combinators.
.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
display: none;
}
If your class start with .postid-, you can used * selector like this,
[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
display: none;
}
[class*="postid-"] #masthead,
[class*="postid-"] #colophon {
display: none;
}
<div class="postid-5648">
<div id="colophon">colophon</div>
<div id="masthead">masthead</div>
</div>
<div class="postid-5365">
<div id="masthead">masthead</div>
<div id="colophon">colophon</div>
</div>
You can group them all together like:
.postid-5648 #masthead,
.postid-5648 #colophon,
.postid-5365 #masthead,
.postid-5365 #colophon {
display: none;
}
This enables subsequent contributors to have a clear understanding of the flow of the document.
Just go through CSS Coding Standards
The [attribute^=value] selector matches every element whose attribute value begins with a specified value.
[class^="postid-"] #masthead,
[class^="postid-"] #colophon {
display: none;
}
Note:[class*="postid-"] is wrong because accept xxpostidxx-5648.
Related
I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...
Here is the HTML code:
<section id="parts" class="two-parts">
<div id="partOne">...</div>
<div id="partTwo">...</div>
<div id="partThree">...</div>
</section>
Here is the SCSS code:
#partThree{
display: block;
.two-parts &{
display: none;
}
}
I want to hide #partThree div, when #parts div has .two-parts class.
Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:
.two-parts body #parts #partThree {
display: none;
}
It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?
As I have answered in your other post:
It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:
#partThree{
display: block;
}
&.two-parts #partThree {
display: none;
}
The & takes EVERYTHING before the current line. So if your final SCSS is:
body {
#parts {
#partThree {
display: block;
.two-parts & {
display: none;
}
}
}
}
Then the & will add .two-parts before everything else, and make it:
.two-parts body #parts #partThree {
display: none;
}
The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>
<section id="parts">
<div id="partOne">...</div>
<div id="partTwo" class="two-parts">...</div>
<div id="partThree">...</div>
</section>
this will only work if #partThree and .two-parts siblings and .two-parts comes before.
I have a simple html/css toggle set up
#toggle1 {
display: none;
}
#toggle1:target {
display: block;
}
#toggle2 {
display: none;
}
#toggle2:target {
display: block;
}
Show1<br />
Show2
<p id="toggle1">1</p>
<p id="toggle2">2</p>
This works as desired by showing and hiding. However I want the initial paragraph to be visible upon page load. If I remove the #toggle1 {display: none;} it does not work properly.
Any assistance would be most helpful and appreciated.
Thanks in advance.
This is just a bit of a hack, but if you reverse the order of the hidden elements, add display:block to the "default" one and then add display:none to :target ~ #toggle1 it should simulate a default selected item:
#toggle1, #toggle1:target, #toggle2:target {
display: block;
}
:target ~ #toggle1, #toggle2 {
display: none;
}
Show1<br />
Show2
<p id="toggle2">2</p>
<p id="toggle1">1</p>
I'm trying to only display the first element and hide all other elements.
Here is an example:
<style>
h1 {
display: none;
}
h1:first-of-type{
display: block;
}
</style>
<body>
<div class="content">
<h1>Test</h1> <!-- only this one should be visible -->
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
</body>
Is there a solution without JS?
Using :first-of-type on h1 would not work, instead use that on the first .content's h1. Like so:
h1 {
display: none;
}
.content:first-of-type h1 {
display: block;
}
h1 {
display: none;
}
.content:first-of-type h1{
display: block;
}
<div class="content">
<h1>Test</h1>
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
DEMO
.content ~ .content h1 {
display: none;
}
This is by what I know the shortest solution, it basicly picks all h1 elements expect the first one.
Explanation:
~ picks all siblings (elements) after the first .content class which have the .content class
If you want to read further W3 Schools with examplesW3 sibling combinators
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
Can i select somehow a group of elements if a class of the parent changes. Like in these example.
The parent class can be alertStateTrue or alertStateFalse.
<div id="parent" class="alertStateTrue">
<div class="childAlertStateTrue"></div>
<div class="childAlertStateTrue"></div>
<div class="childAlertStateFalse"></div>
<div class="childAlertStateFalse"></div>
</div>
.alertStateTrue .childAlertStateTrue
{
display: block;
}
.alertStateTrue .childAlertStateFalse
{
display: none;
}
.alertStateFalse .childAlertStateTrue
{
display: none;
}
.alertStateFalse .childAlertStateFalse
{
display: block;
}
Yes, you can select elements based on their parents:
.a .b {}
The above rule will select all .b elements inside the .a ones.
HINT
You can compress your CSS by grouping the selectors which have exact rules:
.alertStateFalse .childAlertStateFalse,
.alertStateTrue .childAlertStateTrue {
display: block;
}
.alertStateTrue .childAlertStateFalse,
.alertStateFalse .childAlertStateTrue {
display: none;
}
This is called a parent child relationship in CSS structure, you can do as per NOX answer.
If you want to be a more specific than below structure will help you
Use your #parent div.childAlertStateTrue
This will work fine.