I am trying to have a wildcard for:
#room-userlist-user-username
Where I would like room to be wildcarded, is this possible?
I have tried multiple things to fix this but am unable to find a solution.
Please note this is to be used with stylish, so I can't add HTML.
You could do this:
element[id$='-userlist-user-username']
This selects all elements whose ID ends with -userlist-user-username.
jsFiddle example
You can use an attribute selector with a wildcard.
[id$=-userlist-user-username] {}
http://jsfiddle.net/9h7m2bn7/
Related
I'm trying to change the background color of section of the html (built on Wordpress, using Flatsome theme) that has a section's id that changes every time that page is refreshed; dynamic id in a sense.
For example the website has:
<div class="row row-large row-solid" style="max-width:1200px" id="row-1887573675">
but when I refresh the page, the id changes to something else. So, if I want to change the background colour with the following:
.page-id-2001 #row-1887573675 {background-color:rgb(196, 213, 242);}
It will not work, I guess the id changes and would be able to target the id tag.
I'm wondering if there is a way to target this div section so I can change the background colour.
Thanks!
Try to use CSS [attribute^=value] Selector, i hope it'll resolve your issue. Thank You
Documentation: https://www.w3schools.com/cssref/sel_attr_begin.asp
.page-id-2001 [id^='row-'] {background-color:rgb(196, 213, 242);}
You should add a special class to your element and then select that specific class in your stylesheet and give it the rule you wish (in this case: background-color:rgb(196, 213, 242);).
If it doesn't work, it means there is a conflict of specificity between CSS declarations. That may be the reason you wanted to use an ID, but if using an ID doesn't work well, I suggest you should give a higher specificity score to your declaration by other means.
You can find a table that shows you how to give a declaration a higher score. Cascade and inheritance MDN article
As the title says I would like to create a unique div ID for some class in css. Here is some examples:
http://prntscr.com/29rom4
These two blocks are using the same class in the wordpress' css. They are both named as td_block4.
http://prntscr.com/29rp81
Now I would like to create a unique div in the css file of the wordpress theme, where I can put a different background for each "block4".
Here is the example of what I actually want to do: prntscr.com/29rpvd (not a perfect improvisation) :)
And... when I put (in example):
.td_block4 {background-color:#000;}
...in the css, I get this: prntscr.com/29rqbh , and that's not what I want to get.
I hope I'm clear enough, how can I fix this?
Thanks in advance.
I think you can do that only via javascript.You can attack div data-image's with their background , and on load check it and write some js like ".css('background-image',dataimage)"
Take it easy
Your <div>s are surrounded by some more unique parents, so you can simply do:
.span6 .td_block4 { background-color: #f00; }
.span4 .td_block4 { background-color: #000; }
Sometimes, it's not about hooking onto a unique element you want, but by finding a way to use its parents to hook onto a common element, differentiated by unique parents.
Try jquery for this
$(document).ready(function(e) {
$('.td_block4:first').css('background-color','#000');
});
And you can use css for the rest
Is it possible to define the base URL used for <img>-tags of a certain class via CSS?
For example my <img>-tag would look like
<img class="switchingURL" src="pic1.png">
Then I'd like a kind of CSS element like:
.switchingURL {base-url: /images/;}
Then if I want another picture set, I'd rewrite it to something like:
.switchingURL {base-url: http://www.tempsite.de/newstyle/images/;}
Does a tag similar to the base-url I used in the examples above exist?
SEARCH NO MORE , you can not do that with css .
but it's your lucky day , with a simple line of jquery you can do that .
$('img[src=""]').attr("src", "images/someimg.jpg")
the above line searches for empty src and sets it to images/someimg.jpg
I'm doing functional testing using CasperJS's test class, and can't seem to select elements by their text values. My goal is to check that a class of div is visible, and then check it has the value I expect.
I've tried using the CSS3 selectors mentioned on CaspersJS' selector page, but must be doing something wrong. None of the following work for me (all enclosed in ""):
div#myid[text()='sometext']
div#myid[text='sometext']
div#myid[text=sometext]
div#myid:contains('sometext')
div#myid:contains(sometext)
Any pointers as to how I can select a specific element based on it's text value?
Try:
var x = require('casper').selectXPath;
this.test.assertExists(x('//*[#id="myid"][text()="sometext"]'), 'the element exists');
Thanks for the comments above - I ended up going with using jQuery (as it was being loaded on the client) through evaluate() calls in the CasperJS tests.
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.