Say you have this html syntax :
My Hotel
What would be the CSS to target this tag, if I want to select the "aria-expanded" value, and the "href" value ?
You can use this selector
a[href="#myId"][aria-expanded="true"]
more info: https://www.w3.org/TR/CSS2/selector.html#attribute-selectors
The CSS to target the a href and aria-expanded value would consist of the following:
a[aria-expanded="true"] {
background-color: lightgrey;
}
My Hotel
Related
I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.
The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:
[data-foo~="a"] {
color: red;
}
[data-foo~="a"][data-foo~="b"] {
color: blue;
}
<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b
In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.
I'm trying to use the ":target" CSS class to highlight a section of html based on a link clicked that includes an anchor fragment(ex: C:\Desktop\Test.html#link). The regions that are being modified in my document have "name" identity attributes. The target pseudo class worked with "id" attributes for me but am having trouble with "name". Thanks.
PS: The reason I'm using "name" is because I'm writing VBA scripts about HTML documents that were directly converted from MS Word. (Word uses "name" for bookmark conversions to links)
Sample Code I have tried:
a:target {
color: red;
}
a[name = test]:target {
color: red;
}
1st CSS is just for styling (how the content looks, layout etc...), use js you can easily update the content (check the example)
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
2nd
If you just want to check if the <a> element has a name attribute, then use a[name] (2nd link in my example)
If you need partial match do a[name*=test], any name contains test will be selected. (3rd link in my example)
var alltest = document.getElementsByName('test');
alltest.forEach(function(test) {
test.setAttribute('href', '#newlink');
test.innerHTML = 'updated link';
});
a[name] {
color: green;
}
a[name*=test] {
color: red;
}
google.com<br>
<a name="alsowork" href="google.com">google.com</a><br>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>
I have the follow:
<a name="a"></a><b>A</b>
I want to select the next item, the <b>, and highlight it when the target is selecting.
To select anything in the a tag I use: (for example)
[id]:target {background:pink;}
And that works. However, when I use this:
[id]:target + b {}
This doesn't work. Is this not possible with CSS?
I wish I could wrap the a tag around the item, but I don't have that option here.
It will not work, if you use the attribute "name" and then look for "id" in your CSS.
[id]:target { background:pink; }
[id]:target + b { background:pink; }
<a id="a">A</a>
<b>B</b>
Turn pink!
This turns both A and B pink (tested in Chrome / Firefox)
Update your HTML to use ID's or update you CSS selectors to look for the name attribute:
[name]:target {background:pink;}
[name]:target + b {background:blue; color:white;}
focus | blur
<br />
<a name="a">I am the A </a><b>I am the B</b>
I have a group of class name:
.hSpace5{padding-top:0.3125em;}
.hSpace10{padding-top:0.625em;}
.hSpace15{padding-top:0.9375em;}
.hSpace20{padding-top:1.25em;}
.hSpace25{padding-top:1.5625em;}
.hSpace30{padding-top:1.875em;}
.hSpace35{padding-top:2.1875em;}
.hSpace40{padding-top:2.5em;}
Is it possible to target all this class names by referring to the to the first few characters .hSapce--?
you can do it like this in css3
div[class^="hSpace"]
OR
div[class*="hSpace"]
Both are not similar but in your scenario both will work.
First is "starts with class name" and second is "contains class name".
You can use the below selector to select all elements whose class attribute contains the value hspace. Note that this is a contains selector and hence the string can be present anywhere in the class name.
div[class*='hspace'] {
/* styles */
}
div[class*='hspace'] {
color: red;
}
<div class='hspace1'>aa</div>
<div class='hspace2'>bb</div>
<div class='hspace-b'>ab</div>
<div class='c-hspace'>cd</div>
<div class='hvspace'>cd</div>
<!-- will not be selected -->
But check out for browser support.
As mentioned in Rab Nawaz's answer, you can use the below also.
div[class^='hspace'] { }
In-fact, this method might be more suitable for your case because it selects all div whose class starts with hspace.
More information can be found in this W3C Selectors Level 3 Spec in the table present under Section 2.
Is there any way to select a CSS based on one particular 'id' used in the page.
For example.
HTML
<li id="button_preview" href="#inline_content2"></li>
<li id="button_suspend" href="#inline_content1"></li>
Here I need to select one style sheet for #inline_content1 and another stylesheet for #inline_content2. Is it possible to do?
Sure, ID selectors.
li#button_preview {color: red;}
You can't select a specific style-sheet based on the attribute-value, or id, of an element, but you can apply a particular style to an element based on its attribute value:
li[href='#inline_content1'] {
/* css */
}
li[href='#inline_content2'] {
/* css */
}
Or, to use the id:
#inline_content1 {
/* css */
}
You can create a css like this:
#button_preview {
}
http://www.w3schools.com/css/css_id_class.asp