So I looked at how CSS "shares" its properties here : https://stackoverflow.com/a/199719/13707884
This was written in 2008 so I figured maybe CSS does allow for inheritance now & sure enough there is an article on it here :
https://coderwall.com/p/lqjd1w/css-class-inheritance-in-css
So I am trying out the code as mentioned in the link on "coderwall":
[class*=“row-“] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
However, this does not seem to be working. What could I be doing wrong here?
Your quotation marks in your first selector are invalid.
[class*="row-"] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
Related
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 make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
I think this is a real silly question.
But I really can not find an answer.
I need to give all my h2 tags the border-top element, except my h2 tag that is in my <header>.
Now it gives it a big line there and it is going across my header.
I really don't know how to solve this issue that seems so easy.
body {
background-color: AntiqueWhite;
max-width: 800px;
font-family: "Arial", Helvetica, sans-serif;
color: black;
}
h2, h3 {
font-style: italic;
color: darkblue;
}
h3 {
border-top:1px solid #999; padding-top:10px;
}
header {
background-image: url(pics/bg.jpg);
height: 140px;
background-position: center;
}
You just need to be specific.
header h2 {
border-top:none;
}
You can override the <h2>'s style and set the border back to it's default, like so:
h2 {
border-top: 1px solid white;
}
header h2 {
border-top: initial;
}
Or, and this is the approach I recommend, have your border-top in a class. Then, only instances of <h2> that have that class will have a border:
h2.with_border {
border-top: 1px solid white;
}
And then in your HTML:
<h2 class="with_border">This has a border!</h2>
<h2>This does not have a border!</h2>
CSS lets you compose selectors that are more complex; the simplest way of doing this is the descendant selector, which will work for your question. You can write this:
header h2 { }
to target any h2 that is a child (direct or not) of a header. For example:
h2 { border-bottom: 1px solid blue; }
header h2 { border-bottom: none; }
<header>
<h2>No border here!</h2>
</header>
<h2>But here there is</h2>
You should also do some reading up on how css works; there are all kinds of ways to select elements, including classes and attributes. Which one you use will depend on what you're trying to achieve and how specific you need to be.
I have created a JSFiddle for you.
HTML
<h2>Header One</h2>
<h2>Header Two</h2>
<h2>Header Three</h2>
<header>
<h2>Header Four</h2>
</header>
CSS
h2{
border-top: 1px solid green;
}
header h2{
border-top: none;
}
Hope this helps.
I am using less css for a basic website when i was trying to use &extend of less its showing no matches element when the element do exists.
I created a dummy environment same problem exists. Here is my code
style.less
#import 'style1.less';
#colorgreen: #00ff00;
#colorred: #ff0000;
#fontsize: 20px;
#bsolid: solid;
#bdash: dashed;
.container {
border: 1px#bsolid #ccc;
padding: 10px;
.myclass {
border: 1px#bdash #ccc;
padding: 10px;
h1 {
color: #colorred;
font-size: #fontsize;
}
p {
color: #colorred;
font-size: #fontsize;
}
}
}
.extend {
border: 1px solid #ccc;
padding: 10px;
h2 {
color: green
}
p {
&: extend(h2);
font-style: italic;
}
}
<div class="container">
<div class="myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
<div class="importClass">
<p>This is imported CSS.</p>
</div>
<div class="extend">
<h2>First in extend</h2>
<p>Second in extend</p>
</div>
</div>
As the official Less Website indicates, the Less compiler looks at the compiled CSS selector when processing extend.
Essentially the extend looks at the compiled css, not the original less.
So, when trying to extend a nested selector, we should provide the full selector in the extend and not just the inner selector. In the example in question, the compiled CSS selector would be .extend h2 and so when the extend statement has only h2 provided as input, it wouldn't match and not output anything.
So, the below would compile successfully and work as per expectation.
.extend{
border: 1px solid #ccc;
padding: 10px;
h2{
color: green
}
p{
&:extend(.extend h2);
font-style: italic;
}
}
When compiled, it would result in the below CSS:
.extend {
border: 1px solid #ccc;
padding: 10px;
}
.extend h2,
.extend p {
color: green;
}
.extend p {
font-style: italic;
}
Hey I have some styling to do but I'm not sure how to do it using regular css without js.
My html is like this:
<div class="book">
<span class="title">Snow Crash</span>
<span class="author">Neal Stephenson</span>
</div>
And my css is like this:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover { color: orange; }
I want both the author and title to be orange whenever the div is hovered over, even though I have set them to be different colors normally. The spans won't inherit the color property from the div since they have their own colors set, and the hover of the spans won't activate unless you hover over the spans themselves. Can I do this without using javascript?
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover, div.book:hover span.title, div.book:hover span.author
{
color: orange;
}
The rule div.book:hover will not override div.book span.title and div.book span.author because the latter rules are more specific than the former. You will need to do either:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book span.author:hover, div.book span.title:hover { color: orange; }
or:
div.book span.title { color: black; }
div.book span.author { color: gray; }
div.book:hover { color: orange !important; }
I generally recommend against the use of !important unless it's absolutely necessary.
Additionally, I'd admonish that this is CSS3 and is only implemented in modern browser versions.
EDIT:
This is a third alternative:
div.book:hover span.title, div.book:hover span.author { color: orange; }