I am styling a website using CSS. In my project, I need to apply the style to a modal in a bit of a hacky way.
I have elements in the following order.
<div class="dialog">
<div class="dialog-content">
<div class="my-dialog-content">
//I can change the my-dialog-content and the content within it.
</div>
</div>
</div>
In the markup above, the .dialog and .dialog-content come with the npm package so that I do not have control over it. Which means that I cannot add new classes to them. I am trying to override those classes/ elements but I am trying to override for just one dialog. If I override as follow,
.dialog {
border: 1px solid red;
}
it will apply the style to all the dialogs/ modals in the entire project.
I am looking for a selector the .dialog that has the children with .my-dialog-content within it. I tried using has, but it is not working. How can I do that?
you can't have it with css
because in css you can select a child that has certain parent
but you CAN Not Select a Parent based on it's child
for that why you have to use javascript(or in this case hope you have jQuery):
first add style:
.foo{
border: 1px solid red;
}
then add this style to you element with jQuery:
$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')
Related
I am using the ui-bootstrap popover to list some notifications in my application.
I am using the uib-popover-template to design the content of the popover.
I would like to change the padding settings for each elements inside the popover.
I have tried using the popover-class attribute, but this just configures the CSS for the overall popover, and not the elements contained inside - this is what the .popover-content CSS class seems to govern.
Here is the html for the popover:
<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
popover-class="my-notifications-popover"></span>
Additionally, I don't want to do this just by doing:
.popover-content {
margin: 0px;
}
as I have used popovers in multiple places throughout my application and don't want them all to get their CSS redefined.
Can anyone tell me how to change this in the correct manner? All help much appreciated...
EDIT 1: I've tried to do as suggested in the comments by makshh and use CSS selectors to modify the '.popover-content' class. This class is a div contained within the parent '.popover' class.
I tried to do this with the following:
.my-notifications-popover {
margin-left: 0px;
}
.my-notifications-popover div {
margin-left: 0px;
}
This should make the margin-left zero for all child divs of .my-notifications-popover which should be applied to the popover. However it doesn't seem to be applied at all. This approach may not be ideal since it would set the margin for all divs below the popover which I may not want. Is there a way to specifically target the .popover-content class specifically using the CSS selectors?
I've created a plnkr to show exactly how this is not working.... You can see it here: https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso
Added
.popover-no-margin .popover-content {
padding: 0px;
}
https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview
which works because you passed the custom class
popover-class="popover-no-margin"
Well it seems like it was padding and not margin that needed to be changed! What a moron... oh well... sorry about that... still not sure what is the most accurate way to target just the popover-content div
Add this to your plunker example.. .popover-no-margin .popover-content{
padding:0px;
} and check if this is what you wanted.
This removes the extra spaces in the popover and it will be applies to this popover only as you have already defined the class popover-no-margin for this element.
Just check my code css is reflecting for popover content. You can handle css for popover by adding css to popover-content .popover-line or creating a custom css for popover as popover-class="my-popover-class":
HTML
<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button> <script type="text/ng-template" id="myPopoverTemplate.html">
<div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div> </script>
CSS
.popover-content .popover-line { margin: 10px 0px; }
.my-popover-class { color: blue; padding-left: 0 !important;}
Working demo is here
You can add your css accordingly as you want within .popover-content .popover-line (like color,margin,padding and so on)
I checked your code. You miss something. Dynamically created content can't load existing CSS or Js. You should load css and js when you click the button. Just follow this way. I hope it will work with it well.
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover-line"> item 1</div>
<div class="popover-line"> item 2</div>
<div class="popover-line"> item 3</div>
<style>
.popover-content{
display: block;
width: 200px;
}
.popover-content .popover-line{
background-color: #ff00ff;
border-bottom: 2px solid #121212;
padding: 10px 15px;
}
</style>
</script>
If you write this way your custom CSS then it will work property. See the Image below how I write code.
I hope it will help your project.
I'm not sure why this isn't working but I'm trying to make a transition bar on a page that is basically just a block of color across some content.
I'm using Bootstrap 3 but not sure that has anything to do with it. If I apply the color directly to my div tag using a style tag it will work. However, I would like it to be in my style sheet so I can add a left and right border. When I put the same thing in my style sheet and try to apply it the style it won't display. I'm still learning to use the Dev Tools but when I view it using F12 I looks as though it applies my stylesheet style like it should.
Any ideas on what I'm doing wrong?
This works. I'm using a period to control the height for now but will eventually try to apply some height styling.
<div class="row">
<div class="col-md-12" style="background-color:#6f88a1">.</div>
</div>
This doesn't
.home_transition_bar
{
border-left: 1px solid Black;
border-right: 1px solid Black;
background-color: #6f88a1;
}
<div class="row">
<div class="col-md-12 home_transition_bar">.</div>
</div>
well, bootstrap has some pre-defined styles... in order to overwrite them, simple css code might not be accepted. Therefore, try at the end of the style "!important". For example:
#header
{
background-color: red !important;
}
I am working with bootstrap and that has done it for me. Hope it helps
In my html page, I have div with id footer. Inside of that are couple of other divs, and last one of them has p-tag inside. How do I apply css style for that p?
#footer div p {
background-color: #000;
}
#footer div {
float: left;
width: 23%;
border-left: solid 1px;
margin: 0;
padding-left: 5px;
}
The first one does not seem to overwrite the second, which works fine. Could someone give me hint where to find information especially about the order of css selectors?
You can use the :last-child selector to target the last div and its containing <p> tags.
footer div:last-child p{color:#f00;}
Here is an example fiddle - http://jsfiddle.net/vuGpt/
And here is some further reading - http://www.w3schools.com/cssref/css_selectors.asp
There's no real order to CSS selectors, except the order you create. The styles you define will be overridden if you select the same element later in your css. You just have to be aware of how you are selecting your elemnts. A general selector will be overridden by a more specific selector. For example if you defined the following
p{color:#0f0;}
Then this selector will be overridden by your more direct selector as defined above. To overcome this, you can add !important to your rules. That way you can be reasonably sure that that style will be applied regardless of it being overridden later. Unless you accidently use !important again. It can become a mess quite quickly and with well written CSS you chould be able to avoid using !important at all...
Your resulting CSS for the above would become:
footer div:last-child p{color:#f00 !important;}
Hope this helps...
Your CSS is fine. I would suggest checking the structure of your HTML. From the CSS you provided the HTML should look as below:
<div id="footer">
<div></div>
<div>
<p>My paragraph</p>
</div>
</div>
I have tested this and all appears kosher. See fiddle.
For setting a border line between elements, I use border on one side for each child, except the last one. For example
<div class="parent">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
with CSS
.parent div{
display:block;
padding:5px;
border-bottom:dashed 1px #000}
.parent div:last-child{
border-bottom:dashed 0 #000
}
Is there a way to set the border between children from parent's CSS style? without using last-child. In other words, in one single statement from parent rule.
No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced CSS3 selector support:
.parent > div:not(:last-child){
border-bottom: dashed 1px #000;
}
I just know a workaround: use jQuery and iterate through those child elements(each: http://api.jquery.com/each/) and set your css class if next(next: http://api.jquery.com/?s=next) element is also child...
I think another way, just using css does not exist, but I'm not sure, if you find a solution with css only, please post it ;)
Greetings
I saw this selector in Twitter Bootstrap:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Does anyone know what this technique is called and what it does?
It's an attribute wildcard selector. In the sample you've given, it looks for any child element under .show-grid that has a class that CONTAINS span.
So would select the <strong> element in this example:
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
You can also do searches for 'begins with...'
div[class^="something"] { }
which would work on something like this:-
<div class="something-else-class"></div>
and 'ends with...'
div[class$="something"] { }
which would work on
<div class="you-are-something"></div>
Good references
CSS3 Attribute Selectors: Substring Matching
The 30 CSS Selectors you Must Memorize
W3C CSS3 Selectors
.show-grid [class*="span"]
It's a CSS selector that selects all elements with the class show-grid that has a child element whose class contains the name span.
The Following:
.show-grid [class*="span"] {
means that all child elements of '.show-grid' with a class that CONTAINS the word 'span' in it will acquire those CSS properties.
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
All of the elements get hit except for the <span> by itself.
In Regards to Bootstrap:
span6 : this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thus span6 would have a width of 50%.
In the current day implementation of Bootstrap (v.3 and v.4), you now use the .col-* classes (e.g. col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1 and Bootstrap 3.3.7 for more documentation. I would recommend going with a later Bootstrap nowadays
It selects all elements where the class name contains the string "span" somewhere. There's also ^= for the beginning of a string, and $= for the end of a string. Here's a good reference for some CSS selectors.
I'm only familiar with the bootstrap classes spanX where X is an integer, but if there were other selectors that ended in span, it would also fall under these rules.
It just helps to apply blanket CSS rules.
In my case I'm unable to apply background color for class due to dynamic change of class name with numbers
Ex:
Issue:
body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Solution:
body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
Reference: link