What is the meaning of id^ in
[id^="slide"]:checked+ .slide
This line was there in a CSS code and I am unable to figure out its meaning. Please help me to clear this doubt.
^=, in this case, means "starts with". So this selector will look for anything that has an id starting with "slide", that's checked, and then apply to the .slide directly following it.
Here's the MDN run-down of attribute selectors. Closely related to ^= are *= (matches anywhere in the string) and $= (matches at the end of the string). And here's a demo!
[id*="slide"] {
height: 30px;
display: inline-block;
border: 1px solid black;
padding: 10px;
}
[id^="slide"] {
background: orange;
}
[id$="2"] {
background: skyblue;
}
<div id="slide-1">#slide-1</div>
<div id="slide-2">#slide-2</div>
<div id="not-a-slide">#not-a-slide</div>
Related
I'm having a hard time understanding how to properly write scss with BEM naming conventions.
Here I have some HTML:
<div class="SomeBlock">
<div class="SomeBlock__someElement">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--greenBG">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--orangeBG">text</div>
</div>
And the follow scss:
.SomeBlock {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
&__someElement {
background: blue;
text-align: center;
&--greenBG {
background: green;
}
&--orangeBG {
background: orange;
}
}
}
What I would expect to happen is to have 3 different blocks, all identical but with different colored backgrounds, and this is what happens excepted the text is not centered as I would expect it to be since my element style has text-align: center;
What am I misunderstanding? I've read some tutorials on scss with BEM, but I still do not understand.
Be careful when you reference parent selectors using & in Sass because it does not do what you think it does.
In normal nesting in SCSS, this:
a {
b {
/* styling */
}
}
generates a b { /* styling */ }.
However, when you reference parent selectors using &, this:
a {
&__b {
/* styling */
}
}
turns into: a__b { /* styling */ } // note that this is one class.
What BEM advocates is the use of a systematic way of naming classes to style your document, but manually writing out BEM is a nightmare. Sass parent selector referencing using & makes writing out BEM easy, but you still have to remember that you're only generating class names and not actually nesting when using the & in Sass.
What this all means is that in your case, you'll need to add each of the following classes for your various CSS rules to apply:
<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div>
Actually, you were a bit closer in using BEM accurately than #dippas. I would modify your code like this:
<div class="some-block">
<div class="some-block__some-element">text</div>
</div>
<div class="some-block">
<div class="some-block__some-element some-block__some-element--green-bg">text</div>
</div>
<div class="some-block">
<div class="some-block__some-element--orange-bg">text</div>
</div>
scss
.some-block {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
&__some-element {
background: blue;
text-align: center;
&--green-bg {
background: green;
}
&--orange-bg {
background: orange;
}
}
}
Here's simplified outputted css to put things in perspective.
.some-block {
/* block styles */
}
.some-block__some-element {
/* element styles */
}
.some-block__some-element--green-bg {
/* element mod styles */
}
As a general rule, whenever you want to use a modifier you'll need to remember to add the element class an additional time with the modifier. So for your element you have a base class of '.some-block__some-element'. You'll need to add this to all the elements that need this class. Then use that same class and add it again to the element with the modifier. In your example, since you only added that base class to the first occurrence of the three elements, css will naturally only style that one with background: blue, and text-align: center.
Additionally, although you can technically get away with using uppercase class names, I would recommend using lowercase class names and separating multiword names with a single hyphen instead of using upper camel casing.
This is the best way to name classes accordingly to BEM methodology:
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
Take a look at BEM 101 from CSS Tricks
So I would use it single classes to simplify.
.someblock {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
}
.some__element {
background: blue;
text-align: center;
}
.green--bg {
background: green;
}
.orange--bg {
background: orange;
}
<div class="someblock">
<div class="someblock some__element">text</div>
</div>
<div class="someblock">
<div class="someblock some__element green--bg">text</div>
</div>
<div class="someblock">
<div class="someblock some__element orange--bg">text</div>
</div>
This question already has an answer here:
Scss : Selector Inheritance : removing one declaration
(1 answer)
Closed 7 years ago.
I am working on a project in which i need to use a small div and use all the same css characteristics of this div except for one. The problem that i am having is that the methods i've tried are not working, and the only thing that I am left to do is completely copy the entire css class and just alter the one characteristic. That method works, but it is not a very DRY way of doing it, and I am wondering if there is another way.
My front end is like so
%a.btn.button.test{ 'ui-sref' => 'visit.report({ id: visitId })' } v Save a Spot
My css is like so
.button {
color: $button-text;
background: $button-background;
width: 100%;
margin-top: 7px;
margin-bottom: 7px;
padding: 20px;
opacity: 1;
transition: all .1s ease-in-out;
&:hover {
color: $button-text;
opacity: .9;
box-shadow: 3px 4px 4px $button-hover;
}
&:focus {
color: $button-text;
outline: none;
}
i {
position: relative;
vertical-align: middle;
top: -3px;
}
}
So I was just thinking that the solution to this would be to add my .test class inside the button class (I'm using scss) and the change would work out as needed.
like so:
....code
i {
position: relative;
vertical-align: middle;
top: -3px;
}
.test{
width: 50%;
}
}
However, that approach did not work. As of right now the only thing i've been able to do is take everything that is in the .button class, copy it, re-name it .test, and then alter the width. So again I am wondering if there is a much dryer way of essentially stealing one element in a class without having to re-copy the code.
You're close. You've added a style for a .test element within a .button element.
What you mean to say is:
&.test {
width: 50%;
}
which expands to:
.button.test {
width: 50%;
}
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
I'd like to ask a question which I can't find an answer for anywhere. I'm sure it's pretty simple, but how do I put these two css sentences (or functions, I don't know?) together in one?
.key:hover p{
color:red;
}
.key:hover {
background-color: #999999;
}
Thanks in advance.
The following is likely what you're after. This solution, like any other, is affected by other applicable CSS definitions that may already exist.
.key:hover {
color:red;
background-color: #999999;
}
You probably want hover function to be triggered only when the mouse is hovered on exactly <p> however this is not possible as you can see in live demo
.key
{
background-color: green;
width: 250px;
height: 250px;
}
.key:hover {
background-color: red;
}
.key:hover p{
background-color: blue;
}
I want to know is it possible to add some flexibility to css via this:
<div class='round5'></div>
where .round is a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place.
For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class.
<div class="round" style="--radius: 100%;"></div>
<style>
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
You can also define root variables and pass them in as well
<div class="round" style="--radius: var(--rad-50);"></div>
<style>
:root {
--rad-0: 0%;
--rad-50: 50%;
--rad-100: 100%;
}
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
This is also scoped to the element as well. If you set the --radius in one element is wont effect another element. Pretty jazzy right!
You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by.
However, you can do something kind of similar with multiple classes and different properties:
HTML:
<div class="rounded blue"></div>
<div class="rounded green"></div>
CSS:
.rounded {
border-radius: 5px;
}
.blue {
background: blue;
}
.green {
background: green;
}
The .rounded class adds the border radius and the .blue and .green classes add the background color.
(I like to name and order the classes such that they read logically, like <div class="large box"></div>, etc.).
Here is an answer that I came up with that requires a small amount of jQuery, and a small knowledge of Regex.
$(function() {
var number = $("div").attr("class").match(/\d+$/);
$("div").css({
"width": "100px",
"height": "100px",
"background-color": "green",
"border-radius": number + "px"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>
The .match() function uses Regex. Regex is used to detect parts of strings. The \d detects any digits. The + matches the previous selector 1 or more times. In other words, the number can be a multi digit number. And the $ means it has to be at the end.
So then the jQuery uses that in the border-radius property later. All you have to do is append px, and you are good to go.
Fiddle
You could do something similar but not exactly the way you've put it.
CSS
.radius{
border-radius: 10px;
border: 1px solid red;
}
.r5{
border-radius:5px;
}
HTML
<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>
Working Example
In the example above the red border will be retained but the border-radius will change.
Note that you don't start class names with numbers, hence r5 rather than 5
You can use multiclassing on the element. Eg.:
HTML:
<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>
CSS:
.round {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.round.rounded-5 {
border-radius: 5px;
}
.round.rounded-10 {
border-radius: 10px;
}
you can do this. but you have to create the css in the html document(not linked, but between the <style> tag). you can use php or javascript to make a loop. for example try this:
<style>
<?php
$round = 5;
for ($round = 50; $round <= 150; $round+=25){
echo "#round$round{
height: 300px;
width: 300px;
background: #f00;
border-radius : ".$round."px;
margin: 2px;
}
";
}
?>
</style>
<?php
for ($round=50;$round<=150; $round+=25){
echo "<div id='round$round'>
</div>
";
}
?>
hope this helps! :D
Maybe what you want is like this
CSS
.round {
border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
border-radius: 5px;
}
.round.ten {
border-radius: 10px;
}
HTML
<div class="round five">something</div>
You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.
div[class*="round"] {
background-color: green;
color: white;
padding: 10px;
}
And then targeting specific variants of it using...
div[class="round5"] {
border-radius: 5px;
}
The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.