Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.
Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?
and while
a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
works great, as soon as i try to change it into
.about a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
it does not function as it's supposed too.
do tags not listen to span formatting or class nesting?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
}
.bottom-left {
position: absolute;
font:sans-serif;
bottom: 15px;
left: 15px;
}
.bold {
font-family: serif;
}
.about {
font-size: 11px;
font-family: sans-serif;
}
/*a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}*/
.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}
</style>
<title>TEMP</title>
</head>
<body>
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</span>
</div>
</body>
</html>
Hi actually you have commented your email link css:-
so now write the css like this method its working fine......
a[href^="mailto:"]
{
font-family: sans-serif;
color: red;
font-size: 11px;
}
see the demo:- http://jsbin.com/ijofoq/edit#html,live
UPDATED
Now its working fine...edit your HTML and add in your HTML
<div class="bottom-left">
<div class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — info#info.eu
</div>
basically you have to remove the span tag from .about class.
check this :- http://jsbin.com/ijofoq/2/edit
I think .about take precedence over a.
cf. Css Rule Specificity.
Basically, a css ruleset is assign a priority like a version number like this:
{#id}.{#class}.{#element}.{order}
with
{#id} : count of id selectors
{#class} : count of classes, pseudo-classes, attributes
{#element} : count of elements, pseudo-elements
{order} : the index of this rule across all files
So, we have the following order:
0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
0.1.1.a span.about (0 id, 1 class, 1 element)
0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
0.1.0.* .about (0 id, 1 class, 0 element)
span.about and a[href^="mailto:"] have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.
If you remove the span then the rule is less specific and loose.
(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)
Related
I am surprised this has not come up before. Often times when I am styling my website, I have two parents with the same type of child, say:
form#login-form
and
form#reset-form
And in each of these parents, styling the child:
input[type="submit"]
I would have to do:
form#login-form input[type="submit"], form#reset-form input[type="submit"] {
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}
Surely, there is an easier way to do this in CSS? If not, I have code such as
.sidebar-outer + *:not(:empty), .sidebar-outer + *:empty + *
Where .sidebar-outer is a parent with two children.
Just add a common class to all the input fields
example -
<form id = "login-form">
<input class="common-class" type="submit"/>
</form>
<form id = "reset-form">
<input class="common-class" type="submit"/>
</form>
And under the css class you can have the below -
.common-class{
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}
SASS is like CSS on steroids. Just search for "SASS CSS". That said, the best practice way to use it is to start using NPM+Webpack ... worth the learning effort. With SASS you can do something like:
#mixin myinputbuttonstyles {
width: 14.75em;
text-align: center;
font-family: 'Orbitron', sans-serif;
border: none;
}
form#login-form, form#reset-form {
input[type="submit"] {
#include myinputbuttonstyles;
}
}
This sample shows 2 features of SASS: nesting and mixins.
I'm trying to apply this css:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
this works well, the problem is that the web app can set a class on the body called white-content, if the white-content class is setted, then I can't see the text of h2, because the color is white.
Is possible tell to css that the css above must be applied only when the white-content class is not availble on body?
Thanks in advance.
I've condensed the HTML for the sake of this example.
Test 1: Class does exist on body. h2 text should be default black.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body class="white-content">
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
Test 2: Class does not exist on body. h2 text should be white.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body>
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
if you use
body.white-content
that means "body and white-content" class at the same time.
So you can use:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
color: black
}
So when body has .white-content it add that css rule.
See more on
https://www.w3schools.com/cssref/css_selectors.asp
yes it's possible by using DOM manipulation with javascript:
html:
<div id="div01" style="background-color: white">abc</div>
javascript:
if(div01.style.backgroundColor == "white")
{document.getElementById("div01").style.color = "black";}
My application has different form pages. Most of text box elements on those forms share the same global css rule such as width property (150px), font-family, font-size, and so on. So, I make a global css type selector class for most of those text boxes. However, there some text boxes on those forms need another value of the width property (smaller or wider). How can I override such global type for particular text boxes?
The following is my global type-selector class for most of form text boxes:
input[type=text]{
width: 150px;
font-family: verdana,
font-size: 12px;
...
}
Thank you in advance.
Create a class for those particular textboxes, and apply styles to that class:
<input type="text" class="short" />
input[type=text]
{
width: 150px;
font-family: verdana,
font-size: 12px;
...
}
input[type=text].short
{
width: 90px;
...
}
This textbox will then use the following styles:
width: 90px;
font-family: verdana,
font-size: 12px;
Alternatively if an entire form needs these different styles, set the selector for a parent element:
<div class="shortform">
<input type="text" />
</div>
input[type=text]
{
width: 150px;
font-family: verdana,
font-size: 12px;
...
}
.shortform input[type=text]
{
width: 90px;
...
}
Can we write selectors by only name
For example,
<div name= "outer-name">
<img name="inner-image" src="images/ine.jpg" alt"" />
</div>
I want to take style of inner-mage in css file like [outer-name] [inner-image]
In CSS file
[outer-name] [inner-image] {
/*styles*/
}
I cant take selector as [outer-name] img etc .. only selecting by name
You can use attribute selectors:
[name="outer-name"] [name="inner-image"]
But keep in mind that name is not a valid attribute for <div> or <img>, even though the above selector will work. It's best that you either change them to classes, or if you're using HTML5, add the data- prefix to them, so it looks like this:
<div data-name= "outer-name">
<img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>
Then use this selector:
[data-name="outer-name"] [data-name="inner-image"]
Given the following html:
<div data-name="something">
<p>Content in 'something'</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name] [data-someAttribute] {
display: block;
background-color: #ffa;
}
This is perfectly valid (or, at least, it's implemented in Chromium 14/Ubuntu 11.04). I've changed from using name attributes (since they're invalid for div elements, or other non-form elements), and used, instead, data-* prefixed custom attributes, which are valid in HTML5 and, while perhaps not 'valid' in HTML 4, they seem to be understood by those browsers still.
JS Fiddle demo.
It's worth noting that you can also use attribute=equals notation, to select only certain elements based on the value of their data-* attributes:
<div data-name="something">
<p>Content in data-name='something' element.</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name="something"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
Also, if CSS3 is an option for you, it's possible to use attribute-begins-with (^=) notation:
[data-name] {
background-color: red;
}
[data-name^="s"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
And attribute-ends-with ($=) notation:
[data-name] {
background-color: red;
}
[data-name$="ing"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
References:
data-* attributes (W3.org).
data-* attributes, (HTML5 Doctor).
attribute-equals selector (W3.org).
attribute-starts-with, and attribute-ends-with selectors (W3.org).
As #Bolt said, name isn't valid there (yet it still works on my browser). You can use the HTML5 data- properties. Here's a fiddle showing how it's done.
The real solution here would be to use classes, but I assume you have a reason for not using them.
<style type="text/css">
.list .name{
font-weight:bold;
color:red;
}
.items .name{
clear:both;
}
</style>
<div class="list">
<div class="name">Products</div>
<div class="items">
<div class="name">Product Name</div>
</div>
</div>
In the above code, class ".list .name". the "name" is bold and color is red.
And ".items .name" is without bold and color.
What I need is, I don't need to overflow the ".list .name" color and bold to the class ".items .name". I want to break the 1st class in the beginning of ".items"
I need to use "name" in both div.
clear: both is nothing to do with removing earlier styles. Just use the inherit value on all the properties you change:
.list .name {
font-weight: bold;
color: red;
}
.list .items .name{
font-weight: inherit;
color: inherit;
}
.list > .name {
font-weight:bold;
color:red;
}
Should do the trick