How to hide a div class in Wordpress? CSS - css

This is my Div Class, I have included the entire code below. I need to hide this on Wordpress on my site. How do I go about it?
I tried .
section_wrapper clearfix {
display : none;
}
In Custom CSS but does not work. How do I hide this?
<div class="section_wrapper clearfix">
Example Code Below:
<div class="section_wrapper clearfix">
<!-- additional HTML content -->
</div>

since section_wrapper and clearfix are classes so to give them styling you have to include .(dot) before them and you have to use only one among 2 of them.
for example
.section_wrapper{
display:none;
}
If you write like this
.section_wrapper .clearfix{
display:none;
}
It means you are giving styling to the element having class clearfix which is under the element having class section_wrapper

You need to target them as classes in CSS (i.e. with .s in front of the class names). Also, since the classes are from the same element, you need to get rid of the space between the class names:
.section_wrapper.clearfix {
display: none;
}

Related

CSS - How to only apply a style to a div that is inside another div?

This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.

What does "div.container" and mean in CSS

Currently tweaking a theme and have tried searching for an answer to this question to this! I'm not stuck - but more just want to know the answer out of curiosity.
I understand that
"#" means an id and
"." means a class.
I've also been reading on this post about how you can add specificity to your html/css through combination of elements/ids/classes ie:
a.fancy { color: red; } /*an element that has an anchor and a class = red.*/
However the code I am working on has the following elements that I don't understand:
div.footer {background-color: {{ settings.footer_color }};
Why would you specify "div.footer" as both the div and the class when simply using a "." would suffice? In my mind there would be no point when the class ".footer" could be used without a div?
Hope you can help me work this one out!
div.footer means the element must both BE a <div> and HAVE the class footer.
.footer would trigger for any element with class footer; for example, a <span class="footer".
div.footer means you are targeting only <div> elements with the class .footer.
<div class="footer">This is targeted.</div>
<p class="footer">This isn't targeted, as it isn't a div with the class .footer.</p>
div .footer, however, would target all elements with the class .footer that are descendants from <div> elements.
<div><p class="footer">This is targeted.</p></div>
<section><p class="footer">But this isn't targeted.</p></section>
With the new implementation of html5 <footer> is a legitimate tag just like <div> or <p>. As confusing as it may be the period . before the footer declaration constrains it to a class name instead of the tag.
So in your case: div.footer = <div> with class name footer = <div class="footer>.
There are numerous reasons why you may make such a declaration.
Sample html
<div>
<div class="footer">Footer only</footer>
<div>Div only</div>
<footer>Footer tag; DIFFERENT</footer>
</div>
Example Css
div {
border: 1px solid red;
}
.footer {
background: blue;
color: #fff; /* white font color */
}
Depending on what you want to do, let's use the specific div.footer examples to show what we can do.back
Inheritance
By inheritance, div.footer will inherit "3 properties" -> background, color and border from the div and .footer declarations.
Now you may want to override some of these properties so...
Overriding Property
Use something like div.footer { color: red; } this will override the white color.
Layout Insight
The beauty of css is that you can use declaration to give you "insight" on what the html markup will be laid out as.
Omitting properties I would write the css as follows:
#footer {}
#footer ul {}
#footer ul li {}
#footer p {}
#footer p a {}
The html:
<div id="footer">
<ul>
<li>List 1</li>
<li>LIst 2</li>
</ul>
<p>Hello! Copyright website company name.</p>
</div>
You could then reverse engineer the html through just css because of the descendent character use. This maximizes the power of "cascading".
--
NOow I hope some of this has given you some insight. A few other pointers are this:
Typically a webpage has only one footer. When there is only one of something use the # id selector ALWAYS.
Use classes to not only apply styles to multiple elements but to also provide "meaning to your markup" -> go back to the principle of "layout insight" to understand what I mean.
div.footer should could more simply be .footer Now, it may be necessary to include div just to say "I only want to apply this class to divs only" and in that case go for it. But defining all your declarations with div.someClasName is not all that valuable.
DO NOT use names of tags as classnames. div.div is very confusing - especially if you are programming for a while. Therefore, since <footer> is now a legit tag you shouldn't apply it as a classname. On the other hand "#footer" could be argued differently because it can only exist once in a webpage.
It's about specificity. div.footer is more specific (a div with that particular class) than .footer (any element with that class).
As to when to use one or the other, it really depends on the markup and CSS you are building.

How to add an array of classes to a div?

I have a website and I should make certain divs transparent. I don't want to duplicate my divs with a transparent tag. I want to archieve something like this.
.wrapper { --div properties-- }
.transparent { --transparency properties --}
I want to set class attributes like this.
<div class="wrapper . transparent"></div>
So this div would get all the properties from wrapper style, then apply a transparent background.
Use class selectors instead of ID selectors:
.wrapper { --div properties-- }
.transparent { --transparency properties --}
And separate your class names by a single space in your HTML markup:
<div class="wrapper transparent"></div>

CSS - Style specific to single Element

I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
​
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on

Hiding a division using CSS

I am trying to remove a division but I am not able to remove the <div> tag. So I wanted to know if I can hide a division by adding some css codes on the page. The division I am trying to hide is <div id="views" class="menu">.... </div>
Any help?
Add the following CSS to your page or CSS file:
div#views { display:none; }
If you require the div to still occupy the space on the page, use the following instead:
div#views { visibility:hidden; }
Try
#views
{
display: none;
}
in your css

Resources