In the HTML code there is a div like:
<div id="xxx.yyy">...</div>
I want to specify the style in a css file. How can I get a reference to this div? The following does not seem to work:
#xxx.yyy {
}
Thanks
#xxx\.yyy {
}
Should do the trick. No harm done in using dots in CSS id names
You could also do something like this...
div[id="xxx.yyy"] {
/* your styles here */
}
The spec says it all: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
jsFiddle: http://jsfiddle.net/UnsungHero97/mjGzQ/
Related
I've an element I want to style only if it's got two classes applied to it:
custom-select-value--companies
and
custom-select-value--companies-disabled
It's actually the pseudo element I want to style, and the following css works:
.custom-select-value--companies.custom-select-value--companies-disabled::after { // Styles }
It's probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn't work:
.custom-select-value {
&--companies.&--companies-disabled::after {
// Styles
}
}
Also, just wondered as I was writing this - what's the main element of a pseudo element called? "Parent" doesn't seem quite right?
Thanks
Managed to get it working by typing the second selector out in full:
.custom-select-value {
&--companies.custom-select-value--companies-disabled::after {
// Styles
}
}
I have tried to search but am not sure if I am posing the question right.
I applied the following css to my site:
a[target='_blank']::after {
content: '\29C9';
}
This means that all external links will get the icon attached to it. So far, so good, it works as expected.
There are some situations though where I do not want this to happen, like in social share buttons. How can I exclude some classes?
Like when the link appears in a div with class 'socialbutton'?
PS I cannot add other style to these buttons (WordPress website and generated code)
You can overwrite this css code by adding new css to the class.
Example you can overcome this:
a[target='_blank']::after {
content: '\29C9';
}
By doing this:
.socialbutton::after {
content: '\fff' !important;
}
You can use the :not() selector:
a[target='_blank']:not(.social)::after {
content: '\29C9';
}
How do I access the last div (div.access-example) in this line of code?
<div id="footer-example" class="full-example">
<div id="footer-example2" class="fixed-example">
<div class="almost-there">
<div class="access-example">
I tried it like this:
div#footer-example div#footer-example2 div.almost-there div.access-example
{ code goes here; }
When that didn't work, I added { code goes here !important;} in case something was overriding it. I also tried with children (>).
Note: I can't use div.access-example and add my code because the same div is being used elsewhere, and I need to change it only in that particular place; and because it's a Wordpress site and I don't have access to the Ftp, I need to access nested divs.
This works..
#footer-example #footer-example2 .almost-there .access-example {
color:red;
}
This also works
#footer-example .fixed-example .almost-there .access-example {
color:red;
}
Make sure this (your) CSS declaration is not being overridden using Chrome Dev Tools or something similar.
div div div .access-example
{
background-color:yellow;
}
or
#footer-example #footer-example2 .almost-there .access-example
{
background-color:yellow;
}
You can vary by removing one of the class or id in the 2nd.
If you just need to call the .access-example class, you can do this:
.access-example{}
If you need to have the hierarchy, this works too:
.full-example > .fixed-example > .almost-there > .access-example{}
I'm looking for a way to refer to a link by it's target URL. I can't change the HTML to give the links unique names or such.
So basically something like:
a whereTargetURL="/Destination"
{
styling
}
You can proceed like that: http://jsfiddle.net/4F83h/
HTML My link
CSS
a[href="demo.html"]{
/*your rules*/
}
You can do it with the attribute selector:
a[href="Destination"]
{
styling
}
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>