Example: <div class="col-12" style=":first-child { display: none; }">
I don't have access to styles, so I need to fix that in the html file, can I add first-child selector right in the style attribute? The example doesn't work.
Related
I have the following HTML line:
<div data-component-id="12345" class="component" data-component-status="operational">
Is it possible to use the data-component-id as a CSS Selector?
I would like to add a CSS code especially for this div, eg: {display: none}
You can use the Attribute selector [] for this
div[data-component-id="12345"] {
background-color: red;
}
<div data-component-id="12345" class="component" data-component-status="operational">
Demo
</div>
I have defined this hover for div element
div.MyCSSClass:hover
{
background-color: purple;
}
This is my HTML source:
<div class="
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:
.MyParentCSSClass div.MyCSSClass:hover
{
}
But it did not work. I still see the same hover style.
Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.
Thanks for the suggestion. I tried
background-color: none !important;
But when I look into chrome, that CSS is being over-written by
.MyGrandParentClass div.MyCSSClass:hover
{
background-color: purple;
}
and the html source is
<div class="MyGrandParent">
<ul class="MyParentCSSClass">
<li>
<div>
<div>
<div class="MyCSSClass">
<!-- I want to remove CSS hover for this div element -->
My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.
.MyParentCSSClass div.MyCSSClass:hover {
background-color: none;
}
This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.
You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:
.MyParentCSSClass div.MyCSSClass:hover
{
background-color: none;
}
Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.
So try to use background-color: transparent which will work good on all browsers and w3c can validate your code.
Have fun.
This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I have the following HTML.
<th id="form:dataTable:discountStartDate">
<span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
<span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
</th>
I need to hide the given CSS class - ui-sortable-column-icon from the last <span> only.
If I do the following,
<style type="text/css">
#form\:dataTable\:discountStartDate .ui-sortable-column-icon{
display : none;
}
</style>
then, it will hide that class from both the span tags.
The first span tag is written by me. Therefore, it can be manipulated. It can be given an id attribute, if necessary but the other span tag is generated by a framework that I cannot tough.
Is there a way to hide the CSS class as specified from the last span tag only?
It would be even better, if all the classes from that last span tag are overridden.
If you want to dynamically remove the class from the last span element, here is some jQuery:
$('#form\\:dataTable\\:discountStartDate > span:last').removeClass('ui-sortable-column-icon');
jsFiddle example
If you want to remove the class from all the span elements:
$('#form\\:dataTable\\:discountStartDate > span').removeClass('ui-sortable-column-icon');
jsFiddle example
Based on your update, it seems as though you want something like this though.
#form\:dataTable\:discountStartDate span.ui-sortable-column-icon:not(:last-child) {
/* style */
}
Using the :not selector, you can exclude styling from the last span element.
jsFiddle example
You can use CSS to select the last element, or every other element depending on your needs.
#form span:last-child {
display: none;
}