This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I am using slick grid. Which applies slick-cell class on each cell in the grid. On one of cell I have added a another div and a class by name red-bg. See the below image for more information.
See the below image for more info on slick-cell class
Problem: slick-cell class is adding padding to the cell. How can I though red-bg class, force to over-write style in slick-cell class. I want to over-write padding class.
padding-top : 3px !important
padding : 0px in red class will overwrites
important overwrite other css
Put simply, you can't. CSS cascades from Parent to Child. You cannot target the parent from the child only the opposite way around or sibling to sibling.
A hack would be to negate the parent's padding on red-bg by putting a minus margin on red-bg. If slick-cell has padding-top: 10px you could theoretically do:
.red-bg {
margin-top: -10px;
}
This becomes slightly more complicated if slick-cell has padding all around
Related
This question already has answers here:
Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?
(3 answers)
Closed 3 years ago.
I'm trying to add box-shadow to a <div> element but it just doesn't show up.
I've already tried adding height and width in px to the class and tried using z-index on class and parents, nothing worked for me.
Here's the code. https://codepen.io/mateus-ramos/pen/BaBbyMG
I want to add shadow to ".imagem-container" class.
Clip path is cutting off your shadow. A workaround for this is to create a parent div for the element, then put the box-shadow on that. Then use filter to follow the path of your imagem-container (otherwise it will be a square box shadow). This article might help: https://css-tricks.com/using-box-shadows-and-clip-path-together/
You have to add a drop-shadow filter in the parent div, so the effect can be shown. In your code add this into the .job class
.job { /*parent div of .imagem-container*/
display: flex;
padding: 5%;
height: 500px;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
The problem in your case is that the shadow is applied to the text as well. You need to create a parent div only for your .imagem-container div, the text can be outside of that scope and the effect doesn't apply to all the content.
I want to know the real height of an element no matters what it have inside. That's easy. The problem began when I put away the borders of the element and notice an strange behavior, see it here:
http://jsfiddle.net/LypZR/
First div: 122px: OK (children height 100px, children margins 20px, border 2px)
.bordered {
border: 1px solid #000;
}
Second div: 120px: OK (children height 100px, children margins 20px)
.display-inline-block {
display: inline-block;
}
Thirth div: 100px: What? where are the margins?
I solved it using display: inline-block that works just fine for me (in this particular case). But I really want to know what is exactly happening.
I think you're getting surprised by margin collapsing.
The two cases that margins collapse are between adjacent sibling elements and between parent and child elements.
In your case, it's the parent/child collapse that's causing you grief: If you have nothing interesting between the top margin of your parent and the (top margin of its first child|bottom margin of its last child), the parent margin collapses. The transparent border hack is commonly-used in these cases.
You probably noted that it didn't change the actual layout values--the p tag's margin kept the visible elements from collapsing into each other. But I admit it's counterintuitive.
That's called the margin collapsing.
When the child element is given margin and parent element don't have any content in it, this happens.
add this class and its done.
.no-bordered{
overflow:auto;
}
Fiddle : http://jsfiddle.net/LypZR/3/
you can see real height without any collapse if you use the right css selector for all the elements *, so:
* {
height: 100px;
margin: 10px;
}
Like you did it's like a quirk behave for me because I don't know .element selector, and if you look inside the consolle could you see that no margin is applied in the styles tab, but only a computed height is calculated, perhaps for some strange behavior it isn't suppouse to work right. till I know only height width and padding are considerate for real element dimensions.
margins should not be considerate for real element dimensions, this is only an IE issue who do such calc adding margin to real element dimensions. jsfiddle
This is in reference to a nav menu on a site I am working on:
I have applied a hover style to these particular anchors (subnav buttons):
ul#css3menu ul li:hover>a {
Now I want to further style any of these anchors that have a child span element. How could I code that?
I have it somewhat working by applying the style to the span element:
ul#css3menu ul span:hover{
The problem with this is the style is only applied when hovering over the span element's space rather than while hovering over the anchor that is parent to the span (the entire subnav button including its padding)
CSS currently doesn't have a way to check for children (or, what would essentially be a 'parent selctor', something that often comes up as a wishful thought in discussions about css. Read more: http://css-tricks.com/parent-selectors-in-css/)
In order to style something like that, you'd have to use jQuery (or, javascript...)
$('ul').each(function () {
if ($(this).find('span').length) {
$(this).css({your style here});
}
}
If what you do is not dynamic, it would always be easiest to give a class to those lists beforehand and style them.
I just figured out a nifty solution without JS!!
The padding on the anchor is 8px and the padding on the span was set to 0 so I changed the padding on the span to 8 and set the margin to -8 and now the style works when hovering the entire button and I was still able to maintain the size of the button! Stoked!
ul#css3menu span{
display:block;
padding:8px;
margin:-8px 0 -8px -8px;
}
I had to leave the right margin alone to maintain the width of the button and the positioning of the next level subnav.
http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.
I have a div classed content.
Inside the div, is a h1 tag.
Inside the h1 tag is a span tag, with its' class set to regTalker.
Here is the tag:
<h1><span class="regTalker">Not Listed? Register here</span>Browse Listings</h1>
The regTalker class looks like this:
.regTalker {
text-align: left !important;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
The container div has text-align value set to center.
The main string inside of the h1 tag displays centered.
The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be...
What gives? Surely !important should override the content div text-align value?
There are two different css files in question, the main one, and the seconary one, which houses the regTalker class... These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.
I have also cleared my cache and reloaded the css file directly. So its not that either.
I am using firefox 8.0.1, have not tried it on other browsers yet.
If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!
The text-align applies to the content of the element it's applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it's only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned...
If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.
Also, never use !important. It'll just lead to tears and gnashing of teeth in the long run.
You're slightly misunderstanding how text-align works. You can't use text-align to change the alignment of a span within its container; text-align affects the contents of the element it's applied to, and cannot affect its context. (If your span were a block element, your declaration would make its contents align left within it, but would still not make the span itself align left within its container.)
I have used this to answer the problem most described in comments for the answer from GordonM:
.regTalker {
position: relative;
top: -5px;
left: -20%;
margin-right: -10%;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
This was used to keep the main text within the h1 tag roughly centered, while applying positioning to the span element within it.