Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example:
<div class="my_class">
My Link
</div>
I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle.
I do not have the ability to change page layout, however, I can use a custom CSS file that is included automatically.
Thank you
It sure is, using what's called attribute selectors; these are part of CSS2. In your particular case, you'd use:
div.my_class a[title="MyTitle"] { color: red; }
You can read more about attribute selectors here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Yes you can:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
You would say A[title="MyTitle] I believe.
What you are looking for is css attribute selectors:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
a[title]
{
...
}
CSS specifications identify a number of "selectors" that may help you here. For example, you could apply a rule such as the following:
.my_class a[title="MyTitle"]
{
...
}
You can see a detailed specification of CSS "selectors" here:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
Although it is possible, using attribute selectors (see http://www.w3.org/TR/CSS2/selector.html#attribute-selectors ) Internet Explorer 6 does not support it (see http://kimblim.dk/css-tests/selectors/ )
An example from the W3C site: H1[title] { color: blue; }
Related
Is it possible to set a CSS pseudo-class on an HTML element? In this particular case, I would like a certain <div> to have the last-child property.
I asked myself this question when IE11 wouldn't recognize a specific <div> as a last-child while other browsers did. I have found a work around and at this point I just want to know whether setting a pseudo-class on an HTML element can be done.
A coworker suggested this may be in fact done using React framework. However, I have not been able to find anything suggesting this is possible.
No.
Pseudo-classes are used to define the state of an element.
Yes, you can.
This would also have to either be in a JS or CSS file, not an HTML file as far as I know.
For example, I was using :nth-child(4) on an img and can't see it being different with div.
This is how I was using it in my JS:
$('#recipeStack img:nth-child(4)').css({
'transform' : 'translate(160px, -160px)',
'transition-delay' : '0.3s',
'opacity' : '1'
});
And should turn out fine in your case in a CSS file too:
.parent > div:last-child {
background-color: red;
color: white;
}
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
Is there any problem creating a CSS class like this:
[test] { font: 13px; }
and use it in an HTML attribute as this:
<div test></div>
Would the performance in some browsers be affected by using this method?, I've tested it with Mozilla Firefox and Google Chrome and they seem to work with no problems.
Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.
In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.
While there is no problem in applying styles this way, and sure it does work in the browsers, you have to understand that this is not a standard way of applying styles.
Since you have also asked from a 'practice' perspective, then, yes, this surely is not the right practice. The idea is: HTML is used to define the elements to be shown within the browser window, CSS is used to apply any styling that needs to be applied on these elements and JavaScript is used to perform any 'action' on it. So, from a practice perspective, this surely is bad practice!
On another note, why the reluctance to create a class and apply it on the div? After all, this class can be reused as and when required. If you need it only once, then why not create an id selector?
HTML:
<div class="rightApproach">The right way of applying styles</div>
CSS:
.rightApproach { color:Red; }
See this fiddle where you can see your approach as well as the correct way of applying styles, be it class selector or id selector.
http://jsfiddle.net/JkRPt/
It's better to use classes. This way will not work in older browsers and it's not professional.
However it doesn't have any performance issues.
HTML:
<div class="test">
CSS:
.test { font:13px; }
its good to use classes. Example:
<div class="module accordion expand"></div>
/* All these match that */
.module { }
.accordion { }
.expand { }
fashjdkjdasfh.com
hjdshf
How would I go about making one of those links a different color then the other in my CSS document?
I would recommend number 12 from here (The 30 CSS selectors you must memorize)
Basically you can search the href object for a string.
HTML
Google
Yahoo
CSS
a {
color:green;
}
a [href*="google"] {
color:red;
}
The above link is a GREAT article about CSS selectors and goes into depth with examples of many different selectors including the pseudo selectors.
I suggest you should use Id attribute in tag. By doing you can add extended CSS properties for that specific hyperlink.
<style>
.a { ... }
.a#myid { color:red; ... }
</style>
Just give it a class and assign the CSS accordingly:
fashjdkjdasfh.com
hjdshf
<style>
.redlink { color: red; }
</style>
BTW, I'd use http in your href or alternatively //.
http://www.stackoverflow.com
or
//www.stackoverflow.com
Good luck.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.