whether chinese or number ::first-letter only can select first letter not the first character.
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>Scientists exploring</p>
<p>3.5</p>
<p>我...是大傻帽</p>
The case is not with non-English characters only.
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p>....Scientists exploring</p>
<p>3...5</p>
<p>我...是大傻帽</p>
Try placing the first character inside a span and it should work for the first character only.
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
<p><span>我</span>...是大傻帽</p>
Related
I am trying to create some a links using css
this is my css code:-
#footer-links a:link {
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
#footer-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
here is how i am calling it:-
|<span id="filter-links">Privacy Policy</span>|<span id="filter-links">Terms and Conditions</span>|
the first link works fine. It has white text with a green hover. But the second link reverts to blue text with green hover.
What am I missing?
Use Class selector instead of Id, as Id is a unique selector and always effects over the first element having that Id.
Thanks
.filter-links a:link {
font-size: 12px;
color: #262;
font-weight: normal;
}
.filter-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
<span class="filter-links">Privacy Policy</span>|<span class="filter-links">Terms and Conditions</span>
I dont know if you making a mistake here, because your ID definition is filter-links instead of footer-links which you are using in your CSS. Check my snippet below for the correct one.
#filter-links a {
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
#filter-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
<span id="filter-links">
Privacy Policy
</span>
|
<span id="filter-links">
Terms and Conditions
</span>
Hopefully this do the job for you!
I'm having one very difficult time getting :link and :visited to work on my links. I have been searching online for literally hours and read over 20 different instances of the same problem. Bizarrely enough, :hover and :active are working. What is going on?
Here's the code lines in my stylesheet:
H1 { text-align: center; width:1000px; font-size: 30pt; font-weight: bold; }
a.artlinks:link {color:#40C0FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:visited { color:#FF00FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:hover {color:#98D7F6; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:active {color:#FF0000; text-decoration: none; font-family: Cambria, Arial; }
and when I call it in my .html the code is:
<h1>Hello World!</h1>
Does anyone have a solution and also, a more efficient way to give the common a.artlinks parameters simultaneously? Thanks
Your code needs a bit of a tidy up, but this is how I would do it (edit I removed the width property from the h1 for demonstration purposes).
H1 {
text-align: center;
font-size: 30pt;
font-weight: bold;
}
a.artlinks {
text-decoration: none;
font-family: Cambria, Arial;
color:#40C0FF;
}
a.artlinks:visited {
color:#FF00FF;
}
a.artlinks:hover {
color:#98D7F6;
}
a.artlinks:active {
color:#FF0000;
}
See this jsfiddle: http://jsfiddle.net/lharby/zkb8thck/
As the a class has the same properties, you can define those once in a.artlinks (font-family, text-decoration). The other elements that are unique can then be defined for :hover, :active etc.
I have link CSS define as:
A
{
color: #315393; font-family: verdana; font-weight: 500; text-decoration:underline; font-size: 10px;
}
A:Hover
{
color: #999999; font-family: verdana; font-weight: 500; text-decoration:none; font-size: 10px;
}
However, there are a couple cases where I want a link to act like a button and for that I use bootstrap and give them the class of "btn btn-primary", but since they are still links it seems they are still using the above CSS. How can I exclude the link behavior CSS from these and is there a way to do it in-line to the link?
You can use :not pseudo-class to exclude certain elements from the matched selector:
a:not(.btn.btn-primary) {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
a:not(.btn.btn-primary):hover {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
My CSS has the following code for links for the whole website:
#mainpanecontent A:link {
FONT-WEIGHT: bold; COLOR: #6a0a0a; TEXT-DECORATION: none
}
I want to change a header that is also a link to be a different color using the code below but it doesn't enforce it. My code is inside a div that uses the "mainpanecontent" :
Header code
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:active
{
color: #1F507F;
}
#mainpanecontent A:link has a higher specificity than any of your .contact a:somethings. The best way to solve this is probably to give your header an ID and use that. If you can’t, and it’s only in #maincontent, #maincontent will suffice, even if it’s not entirely appropriate. (Depends on the situation.)
#mainpanecontent .contact a:link {
color: #1f507f;
}
Also, just drop the :link, especially if you’re going to specify the same thing for all of them. (The only consideration there, <a name>, isn’t used these days.)
CSS has a system of priority for handling what gets what tags :: Give this a read
Here is a simple rewrite of your code that should work :)
Everything higher on the list should overwrite things lower of the list of the same type
.contact a:active
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
CSS Rules are sometimes not enforced due to how explicit the previous rule was, in the rule you list above it references an ID, which is more explicit than a class.
The other issue of course can be that your "overrides" are defined BEFORE the other rule, therefore they are overwritten.
In the first case you can use !important to force the override of the rule.
e.g.
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a {
color: #1F507F !important;
}
Note I removed the other rules, because you are only setting the link color to the same color in each case, so there's no need to define the pseudo-classes :hover, :active etc. with the same constant.
"outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left;"
I have this as inline css. I would like to substitute blank space for all the properties starting with "background" and "font" using regular expression. In inline css, the last property might not have semi colon as end
I am using this code as a django filter to remove those properties from server side using beautiful soup
def html_remove_attrs(value):
soup = BeautifulSoup(value)
print "hi"
for tag in soup.findAll(True,{'style': re.compile(r'')}):
#tag.attrs = None
#for attr in tag.attrs:
# if "class" in attr:
# tag.attrs.remove(attr)
# if "style" in attr:
# tag.attrs.remove(attr)
for attr in tag.attrs:
if "style" in attr:
#remove the background and font properties
return soup
I don't know about the details of your programming environment, but you asked for a regular expression. This regular expression will find property keys (plus colon and any space) as group 1 ($1) and property values as group 2 ($2):
((?:background|font)(?:[^:]+):(?:\\s*))([^;]+)
The expression does not remove the property values. It finds them. How you remove them depends on your programming environment (language/libraries).
But basically, you would be doing a global find/replace, replacing the whole result with $1.
For example, using Java you could do this
public static void main(String[] args) throws Exception {
String[] lines = {
"outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left;",
"outline-style: none; margin: 0px; padding: 2px; background-color: #eff0f8; color: #3b3a39; font-family: Georgia,'Times New Roman',Times,serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; border: 1px solid #ebebeb; float: left",
"background-color: #eff0f8;",
"background-color: #eff0f8",
};
String regex = "((?:background|font)(?:[^:]+):(?:\\s*))([^;]+)";
Pattern p = Pattern.compile(regex);
for (String s: lines) {
StringBuffer sb = new StringBuffer();
Matcher m = p.matcher(s);
while (m.find()) {
// capturing group(2) for debug purpose only
// just to get it's length so we can fill that with '-'
// to assist comparison of before and after
String text = m.group(2);
text = text.replaceAll(".", "-");
m.appendReplacement(sb, "$1"+text);
// for non-debug mode, just use this instead
// m.appendReplacement(sb, "$1");
}
m.appendTail(sb);
System.err.println("> " + s); // before
System.err.println("< " +sb.toString()); // after
System.err.println();
}
}