I want to set the common parts of a property with one class, and then the discrete portions with a second set of classes. In this case I want to have 1 class where I can adjust the border thickness that will apply to all the 1-n discrete city classes. With the following sample the border does not get applied at all. I have a constraint where I have to make it work in IE8 (sigh)
.cityImage {
border: solid 5px;
}
.chicago {
border: #333;
}
.detroit {
border: #999;
}
(and the list continues for about 10 items)
_______________
<img class="cityImage chicago" src="http:... />
<img class="cityImage detroit" src="http:... />
Your code was slighltly off
.cityImage {
border: solid 5px;
}
.chicago {
border: #333;
}
.detroit {
border: #999;
}
should be
.cityImage {
border: solid 5px;
}
.chicago {
border-color: #333;
}
.detroit {
border-color: #999;
}
Note: You do not need to state an intial border color but if you don't it will default to the current text color applicable to the element..stated or inherited.
I think what you are looking for is border-color: #999. This can then be added with the parent class cityImage.
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
Im styling the following HTML to display messages:
<div className="message">
<div className="message_label">
A message
</div>
</div>
Using the following SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
}
Following BEM, I want to create another modificator version for error messages:
<div className="message--error">
<div className="message_label">
This is an error!
</div>
</div>
This version will just change the previous colors to red so I want to extend the previous SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
&--error {
#extend .message;
border: 3px solid red;
&_label {
color: red; // This is not working
}
}
}
But the selector message_label is not working, since its an inner selector and the #extend doesnt affect it, as explained in SCSS Docs. Whats the best way to extend a class including inner selector?
You can check the DEMO here.
The reason this isn't working is because all #extend does is share some css properties across different classes. So in this case, I would expect it to create a selector like:
.message, .message--error {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
}
.message_label {
color: #444;
padding: 5px;
}
.message--error {
border: 3px solid red;
}
.message--error_label {
color: red;
}
You can see at the bottom of the above css how your color: red might actually end up in a style sheet.
Finally, please do not format your scss like this. It would be a nightmare to maintain and understand.
Answer
My suggestion to answer your question is to just use .message and .message--error on the same element, similar to how Bootstrap does things
I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
I have a simple "fill the gaps" excercise in html. There are gaps, looking like this:
Earth closest star is _ _ _ _.
The gaps are not supposed to be fillable on the computer - the document is supposed to be printed with the gaps enpty. But they have a content so, when howered, answers may be checked.
I use border-bottom property to make the gaps. There is a text filled in the gaps but it is white, so the user only can see it on hover.
The CSS:
span.gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
The HTML:
Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.
Browser seems to fix the color from white to black, so the gap content is visible in the printed document. How should I hide the text then?
I cannot use the visibility property, because the border must be visible.
Of all of the image replacement techniques, there are a few that will work without adding extra elements. All of them will require setting a width on the span if you want it to appear inline.
http://jsfiddle.net/TZD84/
span.gap {
display: inline-block;
width: 8em;
white-space: pre;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: 110%;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
If you need to support older browsers, there's always the negative text-indent method
http://jsfiddle.net/TZD84/1/
span.gap {
display: inline-block;
width: 8em;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: -10em;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
You can use CSS media types to handle different display/media situations. I.e add something like this to your CSS:
#media print { .gap { /* add your styles */ }}
Also, in combination with this you could add a separate span that would display only for print. Like:
HTML:
Stackoverflow only helps you if you ask
<span class="gap">simple questions</span>
<span class="print-gap"></span>.
CSS:
span.gap, span.print-gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
#media screen {
span.print-gap { display: none; }
}
#media print {
span.gap { display: none; }
span.print-gap { display: inline-block; width: 100px; }
}