How can you transform abc to a. b. c. in pure css.
Only if this is not posible how can you achieve this than in angular (typescript).
With typescript it's easy
"abc".split('').join('. ') + "."
you can make a pipe if you need to reuse this function in several places.
With CSS, I don't know how it is possible. I'm curious to know if there is a CSS solution. I suppose no (:
If you have control over the dom:
You can place a span around each character and then use the ::after pseudo-element to add the periods after each one.
It would look something like:
span::after{
content:"."
}
Unfortunately, you can't write CSS solution to do that in functional way. You can replace that in way that #MaxiGui placed in a comment. If you want to achieve that in typescript (or javascript) you can use this code:
const txt = 'abc';
const transformedTxt = `${txt.split('').join('. ')}.`;
Related
I have already learned to use xpath but i am kind of stuck here - http://phptravels.com/requirements/. Can anyone please tell me how to find xpath of "Demo" hyperlink on this website. I simply used //a[text()= 'Demo ']. keep whitespaces in mind.
Try to bind the xpath with an id which is persistent, you can consider using this xpath:
//nav[#id='main-menu']/ul/li/span/span/a[contains(text(), 'Demo')]
The white space is your problem. Use contains instead of equality
//a[contains(text(), 'Demo')]
Or
//a[contains(., 'Demo')]
Here with equals, but better to use contains (or starts-with), as described #Guy
driver.findElement(By.xpath("//a[text()='Demo\n ']")).getText();
to get real text value of element - you can use this:
driver.findElement(webElement).getAttribute("text")
I want to take this code and shorten the css:
h3#username1, h3#username2, h3#username3 { color:#ff0000;}
I tried h3# and h3#* but it didn't work. How would you shorten the code?
You can use CSS attrib->string matching with the ^ like so: h3[id^="username"]. You may have to adjust to taste, perhaps using a second directive with the * wildcard as well.
Here is a fiddle: http://jsfiddle.net/br4hcLus/1/
And more on the thought: What does the selector [class^="span"] do?
I want to achieve the following in css. How do i do it in a cross browser way?
url('../img/icons/' + attr('type') + '_10.png')
I don't think you can. In the content property you can "concatenate" just by separating with a space, but in other places I don't think there is such a feature. Which is a shame.
You'll probably be best off specifying this style in a style attribute whenever the type attribute is used.
CSS performs concatenation without using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.
Examples:
url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
url(attr('href') '#hash'); // https://${href}/#hash
url(var(--hello) ' world'); // Hello World
No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.
Instead, you can use a javascript solutions or a solution based on CSS variables coded in PHP.
You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type] attribute, you could create styles for each one:
.your .selector[type="foo"] {
background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
background-image: url('../img/icons/baz_10.png');
}
If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.
Is is possible to have a superscript registered mark "®" inside a select menu? If so, how is this done? Can you use CSS to achieve this?
There's no way to make a single character superscript inside an <option>. You're stuck with a regular ® (®).
You can achieve results in tough cases using this method to superscript special characters with jQuery.
But I must admit that inside an option... I'm blank.
CSS1 : The numbers need tweaking depending on your font and point size.
<div style="font-size:96px;">
Registered<span style="vertical-align:2.7em; font-size:0.2em;">®</span>
</div>
You can use this key shortcut for ®:
Ctrl + Alt + R
I don't know if this is possible with CSS but in html you could write:
Company<sup>®</sup>
I am not very good with Regex but I am learning.
I would like to remove some html tag by the class name. This is what I have so far :
<div class="footer".*?>(.*?)</div>
The first .*? is because it might contain other attribute and the second is it might contain other html stuff.
What am I doing wrong? I have try a lot of set without success.
Update
Inside the DIV it can contain multiple line and I am playing with Perl regex.
As other people said, HTML is notoriously tricky to deal with using regexes, and a DOM approach might be better. E.g.:
use HTML::TreeBuilder::XPath;
my $tree = HTML::TreeBuilder::XPath->new;
$tree->parse_file( 'yourdocument.html' );
for my $node ( $tree->findnodes( '//*[#class="footer"]' ) ) {
$node->replace_with_content; # delete element, but not the children
}
print $tree->as_HTML;
You will also want to allow for other things before class in the div tag
<div[^>]*class="footer"[^>]*>(.*?)</div>
Also, go case-insensitive. You may need to escape things like the quotes, or the slash in the closing tag. What context are you doing this in?
Also note that HTML parsing with regular expressions can be very nasty, depending on the input. A good point is brought up in an answer below - suppose you have a structure like:
<div>
<div class="footer">
<div>Hi!</div>
</div>
</div>
Trying to build a regex for that is a recipe for disaster. Your best bet is to load the document into a DOM, and perform manipulations on that.
Pseudocode that should map closely to XML::DOM:
document = //load document
divs = document.getElementsByTagName("div");
for(div in divs) {
if(div.getAttributes["class"] == "footer") {
parent = div.getParent();
for(child in div.getChildren()) {
// filter attribute types?
parent.insertBefore(div, child);
}
parent.removeChild(div);
}
}
Here is a perl library, HTML::DOM, and another, XML::DOM
.NET has built-in libraries to handle dom parsing.
In Perl you need the /s modifier, otherwise the dot won't match a newline.
That said, using a proper HTML or XML parser to remove unwanted parts of a HTML file is much more appropriate.
<div[^>]*class="footer"[^>]*>(.*?)</div>
Worked for me, but needed to use backslashes before special characters
<div[^>]*class=\"footer\"[^>]*>(.*?)<\/div>
Partly depends on the exact regex engine you are using - which language etc. But one possibility is that you need to escape the quotes and/or the forward slash. You might also want to make it case insensitive.
<div class=\"footer\".*?>(.*?)<\/div>
Otherwise please say what language/platform you are using - .NET, java, perl ...
Try this:
<([^\s]+).*?class="footer".*?>([.\n]*?)</([^\s]+)>
Your biggest problem is going to be nested tags. For example:
<div class="footer"><b></b></div>
The regexp given would match everything through the </b>, leaving the </div> dangling on the end. You will have to either assume that the tag you're looking for has no nested elements, or you will need to use some sort of parser from HTML to DOM and an XPath query to remove an entire sub-tree.
This will be tricky because of the greediness of regular expressions, (Note that my examples may be specific to perl, but I know that greediness is a general issue with REs.) The second .*? will match as much as possible before the </div>, so if you have the following:
<div class="SomethingElse"><div class="footer"> stuff </div></div>
The expression will match:
<div class="footer"> stuff </div></div>
which is not likely what you want.
why not <div class="footer".*?</div> I'm not a regex guru either, but I don't think you need to specify that last bracket for your open div tag