This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 4 years ago.
innerHTML1
innerHTML2
innerHTML3
I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2] but it doesn't seem to work.
This is not possible using CSS. You can, however, do it using jQuery. There's a nice blog post on it you can read.
It's currently not possible for all browsers with css, but with javascript you can do this
Updated w/ working code. JSFiddle link below:
Initial HTML per #whamsicore:
innerHTML1
innerHTML2
innerHTML3
JavaScript:
var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
if(myEles[i].innerHTML == ' innerHTML2 '){
console.log('gotcha');
//use javascript to style
myEles[i].setAttribute('class', "gotcha");
}
}
CSS for styling:
/* make this look a bit more visible */
a{
display: block;
}
.gotcha{
color: red;
}
https://jsfiddle.net/kjy112/81qqxj23/
Using CSS you can't detect the content of the anchor tag.
[value=] would refer to an attribute on the tag
innerHTML2
Not very useful since the value attribute isn't valid HTML on an a tag
If possible, slap a class on that a tag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:
<script type="text/javascript">
$(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
</script>
And then use .anchortwo as your class selector.
you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.
Using pup, a command line tool for processing HTML using CSS selectors, you can use a:contains("innerHTML1").
For example:
$ echo ' innerHTML1 ' | pup 'a:contains("innerHTML1")' text{}
innerHTML1
<style>
a[data-content]::before {
content: attr(data-content);
}
a[data-content="innerHTML2"] {
color: green;
}
</style>
This is quite simple with a nth-child selector.
<style>
a:nth-child(2) {
color: green;
}
</style>
innerHTML1
innerHTML2
innerHTML3
Edit: Here's the source I found this at. Check here for browser compatability.
Source: http://reference.sitepoint.com/css/pseudoclass-nthchild
Related
This question already has answers here:
Is there a HTML opposite to <noscript>?
(12 answers)
Closed last year.
how to involve a(some) element(s) within body section of HTML only if js is enabled or supported by browser.
involve in the sense if the condition were met(js was enabled or supported), the element(s) would be displayed.
ps: I already know the use of "noscript" element.
A simple way to achieve that would be to hide by default your divs and display them with js.
document.querySelectorAll('.js-only').forEach(x => x.classList.add("show"))
.js-only {
display: none;
}
.show {
display: block;
}
<div class="js-only">
js is enabled
</div>
There is nothing you can do in just pure HTML/CSS. You will need to set the elements to be hidden by default with CSS. When JavaScript runs, you just add a class to the body which will show the elements with additional CSS Selectors.
document.body.classList.add("js-enabled");
.js-block, .js-inline {
display: none;
}
.js-enabled .js-block {
display: block;
}
.js-enabled .js-inline {
display: inline;
}
<div class="js-block">Hello</div>
<p>Hello <span class="js-inline">World</span></p>
I would assume you are trying to see if you can display specific javascript elements or not. I would recommend just using the noscript tag but if you want to check it you can use a .no-js class on the body and create non javascript styles based on .no-js parent class to seperate them.
If javascript is disabled you will get all the non javascript styles you added, if there is JS support the .no-js class will be replaced giving you all the styles as usual.
example:
document.body.randomClassName = document.body.randomClassName.replace("no-js","js");
But I would recommend just a redirect or alert that says that they should enable javascript if they ever want to browse a website to the fullest :)
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;
}
In order to further my CSS knowledge I've been attempting this, but I'm not even sure it's possible.
I have a list of 50 links, 1 per line going down the page. There is very little vertical padding/margin between each link. Each link has been assigned an individual HTML id, e.g.
<a id="test" href="temp.html">blaghblagh</a>
so that visiting http://example.com/temp.html#test will change the page focus to the specific link id.
What I'm wanting is when a temp.html#test url is visited, the #test id link anchor will cause the link to "stand out" by placing padding/margin around the link.
I've been trying to combine it with a:hover and all kinds of stuff but to no avail. Any advice would be greatly appreciated.
You need to use :target pseudo selector:
a:target {
padding-left: 20px;
color: red;
}
Demo: http://jsfiddle.net/dfsq/QuFHp/
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. (http://css-tricks.com/on-target/)
IE supports it starting from version 8. If you need to support older browsers you have to use javascript:
var hash = location.hash;
if (hash) {
document.getElementById(hash.replace('#', '')).className = 'active';
}
There's a :visited selector specific to anchor tags:
a:visited {
padding:10px; /* Whichever values you wish to use. */
margin:10px;
}
The selector you're looking for is :visited:
a:visited {
padding: 5px;
margin: 5px;
/* or whatever you want, really */
}
Try. a:visited{ color: red; }
Find out more about Pseudo-Classes small documentation
This cannot be done with pure CSS, but it is achievable with Javascript/jQuery.
Shameless plug, but I wrote an article on how to achieve this which you might find useful.
http://curtistimson.co.uk/js/reading-url-hashtag-values/
if (window.location.hash){
var hash = window.location.hash.substring(1); //gets id in URL
$("#" + hash).css("padding", "10px"); //applies padding to that element
}
I don't think you can do this normally with CSS. You would have to add a jQuery function which checks to see if there is an ID appended to the URL and if so add a class to that link.
Where are you going wrong with a:hover? Post some code and I'll update my answer to get that working.
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.
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; }