How can I write css selector for an element with specified inline styles?
For example:
<div style="top: 0; left: 0;">link1</div>
<div style="left:3px; top:0;">link2</div>
<div style="top:3px; left:0;">link3</div>
Then, I want to select link1 and link2 since they all have top:0.
I'm not sure about if I should place a space in div[style*="top: 0"] or not. How does the style attribute be setted? Will browser format the string in any format automatically?
Why I need this: I know query an element based on style attribute is not a good idea. But I'm writing user style, while I cannot modify the html page or javascript. The web page only modified the style attribute when events triggered.
Since you mentioned you have no way to change the HTML, one hacky way you can do it is to account for both cases, I guess:
div[style*="top: 0"], div[style*="top:0"] {
/* styles here */
}
An alternative would be to use JS/jQuery if you are willing.
Example for jQuery:
$('div').filter(function() {
return parseInt($(this).css('top')) == 0;
}).addClass("yourNewClass");
Edit: Didn't notice that you mentioned you cannot alter the page via JavaScript as well, but well, leaving this in just in case.
Related
Is there CSS to replace a specific button label even though the class for 2 buttons are same?
Both the buttons are in different pages.Is there a way to replace the label using their current label like "Next" or "Finish"?
I tried below. It worked but it changed the label for both buttons.
.uiButton .label {visibility: hidden;}
.uiButton .label:after {content:'Submit';visibility: visible;position: fixed;}
You should add a class to differentiate the buttons. It's a bad practice to try and base your css on the content of the buttons. What if the wording changes slightly in the future? It would break your css.
Edit: I had assumed you controlled the html, but if you don't, an easier way may be to look into using nth-child or other selectors to find your buttons. Like, perhaps .buttonsContainer .uiButton:nth-child(2)
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You cannot select an HTML element based on its content.
You CAN select based on element type, class/id, attribute or based on a parent.
<element id="thisID class="thisClass" attribute="thisAttribute>
some conent
</element>
element {
styles
}
#thisID {
styles
}
.thisClass {
styles
}
element[attribute="thisAttribute"] {
styles
}
For this to work with a button you would need to key off the VALUE not the content.
<button value="somethingUnique">Button Text</button>
button[value="somethingUnique"] {
your override styles
}
Your best bet is to examine all the parents up the chain until you find a unique class or ID to select. (many pages have something like <body id="contactus")
Then use that to make the button unique.
#contactus .uiButton label {}
I want to change css style of a line in browser.
For example. i have a div
<div class="slider" style="top: 0px; left: -18px;">
Now i want to change it to
<div class="slider" style="top: 200px; left: -18px;">
How can i do it by JxBrowser?
Thank you so much!
You can certainly make CSS modifications, but the elements that you want to modify need to have some distinct identifier so that you can access them via JS injection. This would be a class,'data-value' attribute or an id that is unique to the element or group of elements that you want to modify. If you have that, then you can use something like:
String jsString = "document.getElementsByClassName('slider')[0].style.left='33px';";
Browser.executeJavaScript(jsString);
Functions should wrapped in a JS setTimeout(), onload() or something like a Java TimerTask if you want to ensure that the page is completely loaded first.
There are also limits to what can be done. For example, I haven't found a way to add a full stylesheet block (with filters) to an existing page, but smaller changes are relatively easy.
An existing style sheet has a whole bevy of styles defined for the A element strewn all over the place. I find it pretty difficult to track and trace everything.
I then have:
<ul class="nav navbar-nav navbar-right">
<li>xxxxx</li>
<li><a href='...'>yyyyy</a></li>
</ul>
I don't want the A element above to inherit what are in the style sheet. I also do not want to remove the classes for the UL element as there are other side effects. I know I can override the A styles by specifically setting inline styles, but that would be a lot to override. Is there a way to make that A element discard what is defined for A and have every style at its default?
I'm afraid you can't...
Have you thought about javaScript? You could create a snippet that works like this:
function resetCss(element) {
element.style.color = '#000000';
element.style.textDecoration = 'none';
// ...
}
function reset() {
var elements = document.getElementsByTagName('*');
for (element in elements) {
if (element.className == 'reset') {
resetCss(element); // This function is called on every tag with the reset class.
}
}
}
Call reset() when the DOM is ready and give the class reset to all your to-be-reset elements. Example: Link.
No it's not possible I'm afraid (with standard CSS anyway, maybe with a precompiled like LESS). The "normal way" here is to add an identifier to and make a #mylist a { }. You would then have to change each attribute you don't like.
Of course the best thing would be to start over and make the CSS less of a living hell :)
There is one possibility that you can try. It way can rewrite (overload) styles every that you need. Use strict selecting via ">" selector in styles from you body element to you target 'a' (It's important write strict rules from body, but in several case don't need). And place this overloads style after all - rule for overloads styles - should be placed after all or last included. I use this method every day and with bootstrap, select2, foundation, and other libs, i just overwrite styles.
Example (Just consider that you html example placed in "body" and "header" elements):
body > header > .nav.navbar-nav.navbar-right > a { /* You styles that overload all previous for this element */}
The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.
One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.
As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.
You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.
Thus users with JS support won't see the effects of the special class.
Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).
http://adapt.960.gs/
In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.
scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
You can then use jQuery, for example, to add that additional class:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.