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>
Related
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
Using import.io connector, I was able to extract a segment of html from the source web site. This result is returned as "html" type. The result is a single table of data with styles defined in the body html but not extracted. This resulted in the html segment extracted displayed with NO style and looking terrible.
Is there a way to INCLUDE extracting CSS styles, i.e. multiple css hrefs included in the source html, like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
Also at the same time to include dynamic css like the following:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in the connector extract so that the resultant html segment can be properly styled and displayed?
Thanks in advance!
This is a fairly interesting use case.
You can extract the link and style elements as html using a custom xpath such as //link and //style
You can then output them into your page HTML and that will import the css documents from the pages and should include the styling.
(Be aware that the website in question may not want you to be taking their css and using it on a different website, so they may block downloads of css to websites hosted in different domains)
Sorry, I'm not familiar with Import.io.
Is there way to get refs from links and content from styles? Are you using javascript?
If so, then you may use the folowing js functions to include your styles into the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}
I can't figure out how to get Nitrogen to generate an actual id attribute of an html element. For example, In index.erl:
#panel { id = "test" } or #panel { id = test }
the generated html element looks like this:
<div class="wfid_test"></div>.
but what I want is:
<div id="test"></div>
so I can use an anchor link like Scroll Down to Test to reference the id.
This is basic HTML that has been around forever, so I'm sure Nitrogen must have some way of doing it, right?
Use 'html_id' element instead of 'id':
#panel{ html_id=test, body="Test target" }
it will render as:
<div id="test" class="wfid_temp990008">Test target</div>
you can include both 'id' and 'html_id' elements if you need the class for CSS as well:
#panel{ id=test, html_id=test, body="Test target" }
renders as:
<div id="test" class="wfid_temp990008 wfid_test">Test target</div>
#panel { id = test } should work fine. Just use atom instead of sting.
Consider the code given below
<body>
<div>
Google
Gmail
fb
</div>
</body>
If I want to select <a> tags without using any class and and want to give different properties to them,is there any way?
a { } // all the links
a + a { } // second link
a + a + a { } // third link
or
a:first-child { } // first link
a:last-child { } // last link
With CSS you can check the href attribute like this:
a[href^="http://www.g"] {
color: red;
}
JSFiddle
^= means "starts with this".
$= means "ending with this".
*= means "contains this".
I suppose you could do:
document.body.children[0].children[0] // Google link
document.body.children[0].children[1] // Gmail link
document.body.children[0].children[2] // FB link
However this is a really bad idea because as soon as you change your HTML structure you will have to rewrite all of your code.
If you are trying to do it with CSS, I'd say:
a:nth-of-type(2){color:black;} // Select the second
a:fist-child { color:red;} // Select the first
a:last-child { color:blue;} // Select the last
You can always declare CSS inside of the tags themselves, like this:
Link Here
use jquery (http://www.jquery.com)
it's the famous JavaScript library to manipulate with the DOM
ex:
$("a") select all the link .
$("a:contains['Gmail']") select the link with text gmail
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}