<style type="text/css">
.list .name{
font-weight:bold;
color:red;
}
.items .name{
clear:both;
}
</style>
<div class="list">
<div class="name">Products</div>
<div class="items">
<div class="name">Product Name</div>
</div>
</div>
In the above code, class ".list .name". the "name" is bold and color is red.
And ".items .name" is without bold and color.
What I need is, I don't need to overflow the ".list .name" color and bold to the class ".items .name". I want to break the 1st class in the beginning of ".items"
I need to use "name" in both div.
clear: both is nothing to do with removing earlier styles. Just use the inherit value on all the properties you change:
.list .name {
font-weight: bold;
color: red;
}
.list .items .name{
font-weight: inherit;
color: inherit;
}
.list > .name {
font-weight:bold;
color:red;
}
Should do the trick
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
I'm trying to apply this css:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
this works well, the problem is that the web app can set a class on the body called white-content, if the white-content class is setted, then I can't see the text of h2, because the color is white.
Is possible tell to css that the css above must be applied only when the white-content class is not availble on body?
Thanks in advance.
I've condensed the HTML for the sake of this example.
Test 1: Class does exist on body. h2 text should be default black.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body class="white-content">
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
Test 2: Class does not exist on body. h2 text should be white.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body>
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
if you use
body.white-content
that means "body and white-content" class at the same time.
So you can use:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
color: black
}
So when body has .white-content it add that css rule.
See more on
https://www.w3schools.com/cssref/css_selectors.asp
yes it's possible by using DOM manipulation with javascript:
html:
<div id="div01" style="background-color: white">abc</div>
javascript:
if(div01.style.backgroundColor == "white")
{document.getElementById("div01").style.color = "black";}
I know many inheritance questions have been asked, but each case is unique and I'm having trouble with this one.
I have some h2 elements that need to have unique styling to them but they keep inheriting properties from previously defined h2 elements.
I've tried giving them a unique class, I've tried defining css properties through JS and Jquery, nothing's working.
Here's an example of what I'm talking about:
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2>New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
Even with giving the child's h2 tag a unique class I get nowhere.
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2 class="newh2class">New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2.newh2class {
font-weight:normal;
color:green;
}
<!--or-->
h2.newh2class {
font-weight:normal;
color:green;
}
Can anyone help out?
you need to use !important value to make it so.
h2.newh2class {
font-weight:normal;
color:green !important;
}
You css should look like this
.parent > h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
check it here http://jsfiddle.net/yNFUd/
Your issue is CSS because of how your are referencing the element. Read about stacking and precedence in CSS
http://jsfiddle.net/feitla/SmUGm/2/
.parent > h2 {
font-weight:bold;
color:red;
}
.parent .child h2 {
color:blue;
}
.child > h2 {
font-weight:normal;
color:green;
}
Changing the order and how they are called will affect how they are inherited and calculated.
I have the following HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
.name {
font-size: 18px;
margin-top: 1px;
text-align: right;
}
.contactInfo {
font-size: 12px;
margin-top: 1px;
text-align: left;
}
</style>
<TITLE>Joe Sixpack</TITLE>
</HEAD>
<BODY>
<div id="name">
<span class="name">Joe Sixpack</span>
</div>
<div id="contactInfo">
<span class="contactInfo">
123 Electric Ave, Mudflap, NS 12345 • (888) 555-1212 • Joe#Sixpack.com
</span>
</div>
<HR>
</BODY>
</HTML>
The problem is that I would like the name class to be aligned to the right but it is not happening. Both the name and the address are on the left. Why is that and how do I fix it?
Set the style on the name div, not the name span:
#name {
font-size:18px;
margin-top:1px;
text-align:right;
}
Also, you might not want to have divs and spans with the same name.
You can align text only inside block-level elements. Rewrite you CSS to be like that:
#name {
font-size:18px;
margin-top:1px;
text-align:right;
}
#contactInfo {
font-size:12px;
margin-top:1px;
text-align:left;
}
I get a little lost on css stylesheet syntax. My dilemma is that I have four <div> tags with ROUGHLY the same style, except the colors are different or one may float: left but another tag might not have that.
So I was thinking I could add id to all of these so that I can move these style statements into the stylesheet.
How would I address each individual id in the stylesheet? I'm thinking something like div#id or something. Lets assume basic div is already unavailable, but I want some abstract stylesheet tag that at least contains display:block and font-size:11px and then a more specific stylesheet tag to address each <div> tag by its id or class or name.
<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests </div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>
<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests </div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>
I get a little turned around on the syntax for different selector types
Thanks for any insight
You could try the following:
css:
.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }
html:
<div id="openRequests" class="open floatLeft">Open Requests </div>
<div id="openNumber" class="open clearRight">13</div>
<div id="completeRequests" class="complete floatLeft">Completed Requests </div>
<div id="completeNumber" class="complete floatLeft">13</div>
A <div> is already a block-level element, so you don't need to specify display: block on it.
You can create a class .numbers(or whatever best describes your grouping of divs) to hold the shared styles, and add that class to the divs in question. Then, target individual divs with their id's for tweaking colors.
Something like this might help:
CSS
.numbers {
/* shared styles */
}
#one {
/* unique styles */
}
#two {
/* unique styles */
}
#three {
/* unique styles */
}
Organizing your styles, in a semantic and meaningful way, can be challenging, but the time you save maintaining your code is well worth it. For a much better summary of how to do this, you can read this article.
I would use multiple classes to group silimar styles together. Try to extract semantic meaning:
Something like this:
CSS:
.block11 { display:block; font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="block11 steelblue left">Open Requests </div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>
<div class="block11 green left">Completed Requests </div>
<div class="block11 green left" id="completeNumber">13</div>
since the id's have to be unique, you could add an ID to those and then use:
#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}
NOW, given the above, we can simplify it as:
#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
or IF you want, give them a class and use that:
.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
EDIT:
or IF you want, give them more than one class and use that:
.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{ float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }
<div class="myClass complete" ...
You can define some CSS classes and assign them to your elements according to what you need. Just an example:
CSS:
.myDiv {
display: block;
font-size: 11px;
}
.left { float: left; }
.clear-both { clear: both; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="myDiv left steelblue">Open Requests </div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>
<div class="myDiv green left">Completed Requests </div>
<div id="completeNumber" class="myDiv green left">13</div>
In this way you can separate your classes and use them only when you really need it.
You can use a class for the similarities, and an id for the differences.
<div class="common" id="some-id"><!-- ... --></div>
CSS:
.common {
display: block;
float: left;
font-size: 11px;
}
#completeNumber {
color: green
}