Example HTML:
<div itemid="MenuContainer" id="MenuContainer" class="MenuContainer">
Example CSS:
#MenuContainer {
/* Styles */
}
How can I use CSS to target ItemID instead of the regular ID?
Instead of #MenuContainer, use this.
[itemid="MenuContainer"] { /*CSS STYLES*/ }
This will use data attribute (itemid) and the value (MenuContainer) from the HTML tag.
see this http://jsfiddle.net/442hdc0p/
You should not even try to do that.
Instead, use unique class for this element.
In your example you could add class="MenuContainer extraClass" and then in CSS use .extraClass { color: #FFF; } or whatever to define, what you need.
Related
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
How do I hide this "Data tracking area" which is in the footer? This is the code. I'm on WordPress so I can't edit the CSS but add extra. I tried hiding it using the display:none; but did not work.
<div id="footer" data-tracking-area="footer">
I tried this code but did not work.
.data-tracking-area{
display:none;
}
You can add following css
#footer{
display:none;
}
You can use an attribute selector. Like this:
[data-tracking-area="footer"] {
display:none;
}
Attribute selectors are case-sensitive, and are written inside
brackets [].
There are seven different types of matches you can find with an
attribute selector, and the syntax is different for each. Each of the
more complex attribute selectors build on the syntax of the exact
match selector — they all start with the attribute name and end with
an equals sign followed by the attribute value(s), usually in quotes.
What goes between the attribute name and equals sign is what makes the
difference among the selectors.
[data-tracking-area] {
/* Attribute exists */
}
[data-tracking-area="footer"] {
/* Attribute has this exact value */
}
[data-tracking-area=*"footer"] {
/* Attribute value contains this value somewhere in it */
}
[data-tracking-area=~"footer""] {
/* Attribute has this value in a space-separated list somewhere */
}
[data-tracking-area=^"footer"] {
/* Attribute value starts with this */
}
[data-tracking-area=|"footer"] {
/*Attribute value starts with this in a dash-separated list */
}
[data-tracking-area=$"footer"] {
/* Attribute value ends with this */
}
Here a basic example:
[data-tracking-area="footer"]{
height: 50px;
background: green;
}
[data-tracking-area*="foo"]{
color: #fff;
text-align: center;
}
[data-tracking-area$="footer"]{
text-transform: uppercase;
padding-top: 10px;
}
<div id="footer" data-tracking-area="footer">select me by atrtibute selector</div>
You can use the one that best suits your needs.
Docs: https://css-tricks.com/almanac/selectors/a/attribute/
You can provide styling inline too. As below:
<div id="footer" data-tracking-area="footer" style="display:none;">
Try this, hope gonna work.
In CSS, I want to set different attributes for
<a name="tag">one font and color</a>
and
a different font and color
However, setting the attributes for the <a> tag make both pieces of text have the same color. How can I make them different? Do I have to put an id on every single one?
I'm confused as to why you would have an anchor tag, without an href.
The purpose of the name attribute, is for forms, so that when you submit a form, you can retrieve the data.
In order to style HTML elements, you'll want to use either an id or a class. A class can be used multiple times on a page, where an id can only be used once per page.
It's absolutely possible to style an anchor tag based on the attribute like so:
a[name] {
/* Style 1 */
}
a[name="tag"] {
/* Style 2 */
}
a[href] {
/* Style 3 */
}
a[href="link"] {
/* Style 4 */
}
But it's best practice to use id and class.
You can try this:
a[name] {
color: blue;
}
a[name="tag"] {
color: red;
}
a[href] {
color: green;
}
<a name="tag">A with name as tag</a><br>
<a name="haha">A with name attribute set</a><br>
one font and color
It will set different CSS styles based on attributes
You can use classes for each Anchor tag. It can be used by the tags having similar properties.
See this example.
.tag1{
font-family:verdana;
color:red;
}
.tag2{
font-family:cursive;
color:green;
}
.tag3{
font-family:arial;
color:black;
}
one font and color<br/>
<a href="link" class="tag2" >a different font and color</a><br />
<a href="link" class="tag3" >a different font and color</a>
probably you just apply below css :
a {
color : red;
....
}
This css applys to all a tags in html document.
Instead to apply a css to a specific a tag, Do this:
Html :
<a id="mylink" href="http://google.com">Google</a>
Css :
#mylink {
color:blue;
}
This css just applys to the element which has an id of mylink, for furthur inf comment me .
NOTE : only one element can have a specific id. If you want to use for several elements use class.
Html:
<a class="links">Test</a>
<a class="links2">Google</a>
<a class = "links">Yahoo</a>
Css :
.links { /*This applys to 'a' tas which have <<class="links">> */
color:blue;
font-size:12pt
....
}
.links2 {
...
}
There are more ways like inheritation and according to a attribute. For more information comment.
You could use inline styling like this:
stuff
I have this div:
<div dir="ltr"></div>
That is generated automatically via imap_ function, and therefore I am not able to assign any style to it with the style="" tag.
My question is, how can I assign styles to the div above?
An attribute selector works well if you just want to style this specific element:
div[dir="ltr"] {
/* Styles */
}
Have you tried to use CSS for this?
div {
color: #cecece; /* change the color */
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/wxft9/
[dir='ltr'] {
color: #cecece;
}
or with div - div[dir='ltr']
http://jsfiddle.net/aLvZk/
Try this:
CSS:
div[dir='ltr']
{
/*Styles*/
}
Fiddle
i have this css:
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
and i have this html :
<div class='test1'>name</div>
<div class='test2'>desc_name</div>
<div class='test1'>family</div>
<div class='test2'>desc_family</div>
<div class='test1'>password</div>
<div class='test2'>desc_pass</div>
what i have to do is to select the class test1 but only the tags that contains "family" inside the tag and give a background
i need a solution with css only, i dont need to change inside the html
is it possible ?
Thank You
Impossible with pure CSS. You cannot select on elements content with CSS(3 and higher).
The only you can do is specifying some attribute like:
<div class='test1' data-value="family">family</div>
And then select it with CSS:
div.test1[data-value='family'] { /* ... */ }
If you are using anything below CSS3 -
div.test1:contains("family") {
background: *;
}
The :contains() pseudo-class was deprecated in CSS3 - ergo i wouldn't recommend it, nor am I entirely positive any browser completely supports it.. This answer is entirely subjective.
Edit: apparently the :contains() psuedo class works in jQuery (tested in v 1.9).
You can use jQuery to change your styles. (this solution calls for a CSS only solution, but if this is available, use it!)
$("div.test1:contains('family')").css({ background: "whatever" });
you can use multiple class something like this,
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.family {
/* style */
}
and HTML code,
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
I would suggest this one in orther to prevent override
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.test1.family {
/* style */
}