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;
}
Related
I have the following html markup:
First Link / Second Link / Third Link
I want it to display as:
First Link / Second Link / Third Link
But what I get is:
First Link
/
Second Link
/
Third Link
And links can be clickable in any place of the their row. How can I fix it?
I tried "display: block;", but it didn't help.
Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}
For fast fix:
Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.
a {
display: block;
}
.anchor-regular a {
display: inline;
}
test block test block
<div class="anchor-regular">
First Link / Second Link / Third Link
</div>
HTML anchor tags (a) behave like you want by default. What you are getting means that somewhere in your code, there is a display:block, display:flex or display:grid applied on a elements. You could overwrite this with a display:inline, like so:
a{
display:inline;
}
First Link / Second Link / Third Link
The <a> element is not supposed to be used like you are doing here. <a> is an inline element - which means that it goes with the "flow" of other elements and it does not have a width and height of its own. In other words, it's supposed to be used like a "wrapper" around other elements.
So instead of this:
<a>I'm a link</a>
This is a better idea:
<p><a>I'm a link</a></p>
and then in your styling, you actually style the <p> tag and not the <a>.
In your case, you have a group of links(a breadcrumb, by the looks of it) which you want to represent using links. So you could do something like this:
<ul class="mybreadcrumb">
<li class="breadcrumb-item"><a>First</a></li>
<li class="breadcrumb-item"><a>Second</a></li>
<li class="breadcrumb-item"><a>Third</a></li>
</ul>
And then in your CSS:
ul.mybreadcrumb {
list-style: none;
}
ul.mybreadcrumb li {
display: inline-block;
}
ul.mybreadcrumb li+li:before {
content: ' / ';
}
That + is a sibling selector - so it'll add a / before the second and onward li element.
The a tag is by default a full line, similar to the p tag. If you want to make the a tag only affect its content, do this:
a {
width: fit-content;
}
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
If I have some html like this, with only a class applied to the root. I want to access all <i> tags which are located deeper in the html.
some example html:
<div class="some-class">
<div> <!-- unknown type - could be span, div or something else -->
<i></i>
</div>
</div>
If the i tag was a direct child I could apply styling in scss like this:
> i {
color: grey
}
If I knew that the first child was always a div element i could apply styling like this:
> div > i {
color: grey
}
However I don't know the type of the first child - it could be anything.
How do I correctly apply styling to the i tag in this case ?
If it isn't possible with an dynamic solution - How can I then apply the styling to all the i tags within the root element, without styling i tags outside this element.
Specifying the root element and just leaving a space means descendant, so
.some-class i {
color: grey;
}
should do what you want.
If you want to only style them if they are at least one level deeper than the root then use * which means any tag.
.some-class * i {
color: grey;
}
Finally, if you want to target them at specifically the third level use
.some-class > * > i {
color: grey;
}
Did you try:
.some-class i {
//Your styles here
}
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
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