Hello and greetings to you all.
I have a strange reaction with css in one website that i'm making.
There is this code
<a class="instagram-photo image" id="p1130472628000663001_176824616" href="PROFILE" target="_blank" data-name="NAME" data-caption-std="Colors #thefeditor" data-caption="Colors #thefeditor <a target="_blank" href="INSTA LINK;>View Photo</a> " data-created="1448982860" data-author="AUTHORNAME" data-likes="87" data-comments="0" data-profile="PROFILE LINK" rel="group"><img src="IMAGE LINK"><span class="journal-meta">Example Name<span>username</span></span><span class="icon">Image</span></a>
The above image is set with the following background color.
media="all"
.classic-view .instagram-photo.image {
background-color: #3dc0f1;
}
I'm trying to change the blue color (#3dc0f1) color to this
background-color:rgba(255,215,0,0.6) !important;
With no luck because i want to change the color ONLY to this id
id="p1130472628000663001_176824616"
because if i go to the custom css and put this css code
.instagram-photo
{
background-color:rgba(255,215,0,0.6) !important;
}
It changes all the images, but i want to change the images with the ID that i gave you above.
I have tried
#p1130472628000663001_176824616.instagram-photo {
background-color:rgba(255,215,0,0.6) !important;
}
But it didnt work. Any idea of how can i make it work? Thanks!
P.S. the answer below is also correct but i also managed to do it with
a[id*="_176824616"][class*="image"]
{
background-color:rgba(255,215,0,0.6) !important;
}
Thanks a lot!
Why not just doing:
.instagram-photo#p1130472628000663001_176824616
{
background-color:rgba(255,215,0,0.6) !important;
}
That way, you are declaring a rule to CSS that says that you want to set the background color to an element of class instagram-photo and with id having your id - notice that the class and id are concatenated to one phrase on the rule. This is done in order to specify the rule containing both class and id on a specific element and not the nested ones.
Also, consider that for simplicity, you could simply do:
#p1130472628000663001_176824616
{
background-color:rgba(255,215,0,0.6) !important;
}
By "saying" to CSS you want to apply the rule only to the element(s) with the specific ID, without taking into consideration its class - this is specific on your case, so it should work fine.
In addition, consider avoiding using !important, as this can lead to unexpected behavior on your rules and violates the sequence the rules are applied.
Related
In Chrome and Firefox, the following doesn't have the desired effect:
<style>
#hoverOnMe { background-color:orange; }
.open:hover { background-color:lightblue; }
</style>
<div id='hoverOnMe' class='open'>HELLO</div>
The :hover doesn't work. The background remains orange on hovering.
However, each of the other three possible combinations (listing by id twice, listing by class twice, and listing by class followed by id) works.
Of course my actual project is a little more complicated than this example; I'd like to add an "open" class to every hoverable element.
What's going on here? What's the simplest workaround?
I'd like to add an "open" class to every hoverable element.
Well if this is the case and you expect the same behaviour for all elements,
then you could just use !important:
.open:hover {
background-color:lightblue!important;
}
I'd like to know if there's a way to apply the same styles to IDs that start with the same workds.
For example, I have #youtube_gallery_item_1, #youtube_gallery_item_2,....and the number keeps increasing, so I can't add a new ID every time I add a new item. FYI, I'm working with Wordpress and YouTube SiimpleGallery plugin.
I'd appreciate your help!
The "starts with" selector in CSS3.
div[id^=youtube_gallery_item] {
}
Note that this doesn't work in IE8 and below.
What would be a better idea would be to assign all of your #youtube_gallery_items a class, and then assign styles to that class. I'm sure that the plugin that you're using is doing this. Look at the source code, and if you see that they all have the same class, use:
.name-of-the-class {
}
You can use an attribute selector:
[id^="youtube_gallery_item"] {
color: skyblue;
}
http://jsfiddle.net/p9Ya8/
I would suggest adding a class
.youtube_gallery_item {
background: ;
width: ;
...
}
Its compatible with all browsers and is the easiest way to get around.
<div id="youtube_gallery_item_1" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_2" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_3" class="youtube_gallery_item"></div>
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.