I created fiddle to show the example: I think I am setting parent CSS and then I apply the child's CSS. But it seems like it is being ignored.
http://jsfiddle.net/8PWNw/2/
<div id="displaybox" class ="displaybox" style="display: none;">
<div class = "parent" >
Parent 1
</div>
<span class ="child" style="padding: 0 10 ">Child 1</span>
<div class = "parent" >
Parent 2
</div>
<span class ="child" style="padding: 0 10 ">Child 1</span>
</div>
Please advise. I am new to CSS, so there are many things that I need learn.
Line 23 in your CSS:
/* this is actually saying element with both 'parent' and 'a' class */
.displaybox .parent.a {
color: black;
}
You probably meant:
/* this is actually saying all 'A' elements within element with 'parent' class */
.displaybox .parent a {
color: black;
}
That is why your 'A' element style is being ignored.
padding: 0 10 isn't valid (use a validator) so browsers are required to ignore it.
Lengths, other than zero, must have units (such as px or em).
You shouldn't be able to tell this though, since display: none hides everything.
Your class displaybox is set on display: none, which basically hides the entire container.
On another note, you use classes parent-child, but your children aren't nested properly into their parents. You need to put them before the end </div> tags so they be a part of that container.
I edited your fiddle and this should work now: http://jsfiddle.net/8PWNw/
This is what I changed:
I removed the display:none so your displaybox is shown again. I then changed some CSS:
Changed this, because your syntax didn't work before. The "." indicates you're addressing a class, in this case class displaybox with a child class parent, and you want to address all a elements in that class.
.displaybox .parent a
{
color: black;
}
I also added this one so you're links are showing as white:
.child a
{
color: white;
}
With those changes, you should be able to get it working like you want.
Related
if I add a css class to my div, it will be overwritten with v-slot-tradeMatrixLayout. How can I specify this class specifically in my CSS file so that only this is called. The tradeMatrixLayout is given to a VerticalLayout.
This will be examined in chrome
<div class="v-slot v-slot-tradeMatrixLayout">
And this is my CSS file
.tradeMatrixLayout{
margin-left: 15px !important;
}
How can the div call my specifically written class?
The class attribute can receive multiple CSS classes by using their name and separated by a space, as seen here. For your case you can add it like:
<div class="v-slot tradeMatrixLayout">
In this example, you are adding 2 classes: v-slot and tradeMatrixLayout.
if v-slot is overwritting whatever you are trying to set with tradeMatrixLayout, then it means that you have to play with Specificity. In summary, some rules have more importance than others, even if you use !important (imagine you have 3 classes that use !important, which one should be used?). The higher the specificity, the more important is the rule.
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., > #example).
if you want it to have more specificity, either change your CSS to:
div.tradeMatrixLayout{
margin-left: 15px;
}
of add it using an id:
<div id="myDiv" class="v-slot tradeMatrixLayout">
div#myDiv.tradeMatrixLayout{
margin-left: 15px;
}
You can also use javascript to add the class by manipulating the DOM.
function myFunction() {
var el = document.getElementsByClassName("v-slot");
el.classList.add("tradeMatrixLayout");
}
it should be end with your class
[class$='tradeMatrixLayout']{
color: red;
margin-left: 15px !important;
}
Just try above code it will work for you
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class
I don't fully understand what you clearly want though? What you have seems okay?
v-slot v-slot-gewerkeMatrixLayout
This is referencing to these 2 classes, It cannot use the same elements from both as it will be overwritten. But if you have 2 different instructions it should work
You could just specify the class your in your CSS like this
.v-slot-tradeMatrixLayout {
margin-left: 15px !important;
}
Just add another CSS with that CSS class (v-slot)
Like:
.v-slot{
margin-right:5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
And your html will look like
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
.v-slot{
border: 3px solid blue;
height: 50px;
width: 50px;
margin-left: 5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.
The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.
For example, if we have this HTML document:
<div class="container">
<div class="square">
<div class="square">
</div>
<div class="container">
<div class="circle">
<div class="circle">
</div>
To select just the .container divs, the following CSS can be used:
.container
{
/*Styling*/
}
To select just the .square inside the .containers then use:
.container .square
{
/*Styling for squares*/
}
To select all the elements that are inside the .containers then use:
.container *
{
/*Styling for squares, circles, rectangles and everything else you can think off*/
}
For further information, see the W3C reference on the Universal Selector:
http://www.w3.org/TR/selectors/#universal-selector
And also the Mozilla Dev Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
When star(*) is placed after the a class name it will select all its children.
From MDN:
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.
If you have this HTML
<div>
<span class="style-me">i want to be styled</span>
</div>
<div class="ignore-my-descendants">
<span class="style-me">i want to be styled but my parent prevents it</span>
</div>
then this CSS selector
.style-me:not(.ignore-my-descendants *) {
color: red;
}
will not match anything. Maybe because :not() only accepts simple selectors which is not given here (I'm not sure, hope you can tell me the true reason).
Is there a pure css way to filter out those elements that have a parent matching a given criteria?
EDIT: i don't want to apply any values to the elements to be ignored.
This is important because the desired display property value of an element cannot be foreseen.
umm... you are selecting a child and asking to match its parent. Won't work
There is an easy way
.style-me {
color: red;
}
.ignore-my-descendants .style-me {
color: white;
}
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated