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>
Related
I'm applying a background to a div like so:
<div class="bgimg">test</div>
.bgimg {
padding-top: 10px;
&::after {
background: url('/assets/img/test.png') no-repeat center center;
}
}
The path to the image is dynamic and stored in the component:
export class MyComponent {
myImage: string = "/assets/img/test.png";
So to my div element I want to apply an ngStyle but I don't know how to specify :after
<div
[ngStyle]="background: url('{myImage}') no-repeat center center;">
test
</div>
By using the ::after pseudo class you are not applying the background to either the parent div or any other element. It's not clear why you want to use ::after to show a background.
You need to include ng-style such as: <div ng-style="bgimg">test</div> so that Angular can reference the element.
Once you have that, you can call bgimg={'background-image':'url(myImage)'} and it will apply the background to the referenced element.
For more information, take a look at this Angular documentation and this example code you can play with. I hope this helps, but this is my first answer on StackOverflow so bear with me!
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;
}
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.
In the html fragment below, I want the "main" div to have a background image only if "menu" div is not present in the markup. Is this possible?
<div class="header">
<div class="siteTitle">site title</div>
<div class="tagline">site tagline</div>
<div class='menu'></div>
</div>
<div class="main"></div>
http://www.w3.org/TR/css3-selectors/
E + F Matches any F element immediately preceded by a sibling element E.
E:not(s) an E element that does not match simple selector s
edit :not uses a simple selector, so unfortunately you can't use it to filter by properties of children, only attributes of the element.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
You could however put a .empty class on the menu and still use it.
.header .menu:not(.empty) + .main {
background:pink;
}
This solution is the best of both worlds, javascript but using css as per normal.
javascript:
if ($('.menu').length == 0){
$('body').addClass('no_menu');
}
css :
body.no_menu .main{
background:pink;
}
The only pure css solution i see is only possible if you rearrange your html like so:
<div class="header">
<div class="siteTitle">site title</div>
<div class="tagline">site tagline</div>
</div>
<div class="menu"></div>
<div class="main"></div>
then you can use this css to only apply a property):
.menu { background: none }
.menu ~ .main{ background: url() } /* or .menu + .main if they are guaranteed to be adjacent to each other on the code */
in this example, you can see it at work: http://jsfiddle.net/tYhxr/
(test it by deleting the menu div and running it again)
check Keyo's asnwer for a link about how selectors work.
If you can't change the html, the javascript is the way to go.
I hope this helps.
You could add a second class to your main <div> that only serves to add the background you want. Then when you create the markup, you just add the second class specifier to the <div> if you need it, or omit it if you don't.
div.main {
//main stuff
}
div.mainbg {
background: *background-specifications*;
}
When your menu div is present, you use this:
<div class="main mainbg">
And when it's missing, you stick with:
<div class="main">
how i can use two style on a div <div id="span,google"></span>
You can't assign two id's like that, but you can use two classes:
<div class="span google"></div>
Also, you can't start the element as a div and close it as a span as in your code. I'll write that off as a typo, tho.
.span { some-css }
.google { other-css }
You can do:
<div class="span google"></div>
where you should have .span and .google classes set in your stylesheet