This question already has an answer here:
Concatenating nested classes using SASS [duplicate]
(1 answer)
Closed 8 years ago.
I have the following CSS/SASS.
.socialMedia__button{
display:block;
text-align:center;
padding:10px;
border: 2px solid;
border-radius: 5px;
color:#fff;
width:100%;
.facebook {
background:#3c5b99;
}
.twitter {
background:#429aff;
}
}
The HTML is:
<p>
Sign up with Facebook
</p>
However, my HTML doesn't seem to recognise the facebook part. Why is this?
Thank you
Your SASS will compile to this:
.socialMedia__button .facebook
But you actually want this:
.socialMedia__button.facebook
Try this SASS instead:
.socialMedia__button{
display:block;
text-align:center;
padding:10px;
border: 2px solid;
border-radius: 5px;
color:#fff;
width:100%;
&.facebook {
background:#3c5b99;
}
&.twitter {
background:#429aff;
}
}
...
&.facebook {
background:#3c5b99;
}
&.twitter {
background:#429aff;
}
...
With your code, you are refering to an element .facebook INSIDE an element .socialMedia__button
If you want to refer the SAME element with 2 classes, you need to use "&."
Hope it helps
Related
I have global css class with the name of i-style. I want to change its style depends on selector. I know that it can be done by using class and &. selector. But I want to get it done by giving selector only.
for example
i-style{
border:solid 1px black;
&div{
border-color:red;
}
}
<span class="i-style"></span>
<div class="i-style"></div>
In that case div should have red color border.
If I understand your question maybe this help you:
SASS
.i-style{
border:solid 1px black;
#at-root div#{&}{
border-color:red;
}
}
OUTPUT
.i-style {
border: solid 1px black;
}
div.i-style {
border-color: red;
}
#Carlos, please try this. I hope this resolves your requirement
$selectorVar:'null' !default;
.i-style{
border:solid 1px black;
// build selector string
$selectorVar: div+& !global;
//$selectorVar: div+&, span+& !global; - for multiple selectors
}
#{$selectorVar} {
border-color:red;
}
This generates output like
.i-style {
border: solid 1px black;
}
div.i-style {
border-color: red;
}
Note: Generally, I don't pollute global namespace!. Accept this answer if it helps
I'm learning CSS and I found this syntax to group multiple selectors:
element-1, element-2 {
/* css declarations */
}
This means that the elements are in the same styling, so why don't we give them the same class? Is there any recommendations?
While there are probably many reasoning behind a general syntax decision, I could at least name one. Take the following example:
ul, li, p {
padding: 0; margin: 0;
}
Sometimes when you are resetting styles across different elements, you can use ,. You may group those using classes, but that would mean you need adding a class like .no-padding to each and every ul, li, p.
Not neat.
You can write the CSS rules without group of selectors, but you can minimize your CSS code with these groups. See the following example:
.one, .two {
color:red;
}
.two {
text-decoration:underline;
}
/** not optimized / no selector group */
.oneone {
color:red;
}
.twotwo {
color:red;
text-decoration:underline;
}
<p class="one">Hello World #1</p>
<div class="two">Hello World #2</div>
<p class="oneone">Hello World #1</p>
<div class="twotwo">Hello World #2</div>
Here is another illustration to join the two already featured (by Dai and sebastianbrosch)
Say you have a class that sets some values for an HTML element:
.someClass {
font-size:1.1rem;
color:#c00;
border: 2px solid #000;
padding: 1vh 1vw;
}
And just suppose you have another element (.someOtherElement)which you want to have the same font-size as someClass, and the same colour, same padding but no border?
Option 1:
Write everything out twice:
.someClass {
font-size:1.1rem;
color:#c00;
border: 2px solid #000;
padding: 1vh 1vw;
}
.someOtherElement {
font-size:1.1rem;
color:#c00;
padding: 1vh 1vw;
}
Option 2: Don't write everything out twice:
.someClass, .someOtherElement {
font-size:1.1rem;
color:#c00;
padding: 1vh 1vw;
}
.someClass {
border: 2px solid #000;
}
This more closely follows the DRY principles of programming and allows for immense flexibility, applying various rules to as many or as few identifiers as needed.
I am trying to create a tooltip for my site that gets data from MySQL. everything is working fine but it displays html tags. data is stored in MySQL using tinymce so it does not strip the tags when entered nor I want it to, However I would like it to strip it in the tooltip.
This is my code and screenshot
Thanks in advance.
.tooltip span {
z-index:10;
display:none;
padding:8px 8px;
margin-top:23px;
width:260px;
max-width:260px;
max-height:260px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color:#ffffff;
overflow:hidden;
}
.tooltip:hover span{
display:inline;
position:absolute;
color:#ffffff;
background:#2588b3;
text-decoration:none;
}
.tooltip:focus span{
display:inline;
position:absolute;
color:#ffffff;
background:#2588b3;
text-decoration:none;
}
Screenshot with text only
Screenshot with image and links
How can I strip the images and links just from the tooltip? I've tried text-decoration but that did nothing.
Thanks once again.
Resolved by writing my own modifier:
save it as smarty/plugins/modifier.strip_tags_exclude.php (or in your custom plugins folder)
function smarty_modifier_strip_tags_exclude()
{
$params=func_get_args();
if (!isset($params[1])) {
$params[1] = true;
}
if ($params[1] === true) {
return preg_replace('!<[^>]*?>!', ' ', $params[0]);
} else {
if (is_string($params[1]))
{
$allowable_tags = strtr($params[1],'[]','<>');
}
return strip_tags($params[0],$allowable_tags);
}
}
and then you can use it this way:
{$variable|strip_tags_exclude:''}
or alternatively (some editors may get confused and think that you're opening tags):
{$variable|strip_tags_exclude:'[a][p][ul][li]'}
I've been trying like a mad man to get the following LESS statement to work, but now i am fearing that it's not gonna happen :/ So I am turning now to you guys in the end for help!
I have the following statement:
.top{
&-first{
background:black;
&-item{
color:white;
}
}
&-second{
background:green;
&-item:extend(.top-first-item){}
}
}
I was hoping for to achive the following output:
.top-first {
background: black;
}
.top-first-item,
.top-second-item{
color: white;
}
.top-second {
background: green;
}
But unfortunately it does not compile that but this instead:
.top-first {
background: black;
}
.top-first-item{
color: white;
}
.top-second {
background: green;
}
LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).
A workaround for your particular case:
.top {
&-first {
background: black;
}
&-second {
background: green;
}
&-first, &-second {
&-item {
color: white;
}
}
}
Another option is to break the designations into separate classes:
LESS
.top{
&.first{
background:black;
&.item{
color:white;
}
}
&.second{
background:green;
&.item:extend(.top.first.item){}
}
}
CSS Output
.top.first {
background: black;
}
.top.first.item,
.top.second.item {
color: white;
}
.top.second {
background: green;
}
Which of course requires a change in your html designation from class="top-first-item" to class="top first item".
This is obviously something that should be working in LESS. I have a few months ago put an issue on the LESS.js github regarding exactly this.
Link to Github issue
In the mean time, i recommend using seven-phases-max's solution by simply putting the classes together like so:
&-first, &-second {}
But then you cant abstract the second out into another file.
Another solution would to make an "extends.less" file, in which you can have small snippets you find your self using time from time.
Just use 'all' suffix. Example: &:extend(.top-first-item all);
I am using external stylesheet for styling my default.aspx page , i am using master page in my project.I am referring to the stylesheet in the master page.
My problem is , i have many dropdowns and textboxes on my form , i am using both classes and id's for each control.When i use class for a particular control in stylesheet changes are reflected ,, however when i use id for styling , changes are not reflected.Controls remain as they were.This must be something really obvious that i may be missing.I am using '.' and '#' for class and id respectively.Any help is much appreciated.
Here is my default.css file
.textbox ,.dropdown,.checkdate1,.checkdate2,.NumZero,.NumLenZero,.NumDecTwo {
margin-bottom:10px;
}
.textbox,.checkdate1,.checkdate2,.NumZero,.NumLenZero,.NumDecTwo {
border:1px solid gray;
}
#disabled {
width:1000px;
margin-left:auto;
margin-right:auto;
color:White;
background-color:red;
text-align:center;
border:1px solid gray;
}
#drpCustType,#drpGender,#drpCountry,#drpMaritalStatus,#drpCorrespAdd,#drpEducation,#drpOccupation {
width:130px;
}
#drpResCity,#drpOffCity,#drpNativeCity {
width:160px;
}
#drpInitial,#drpReligion {
width:100px;
}
#drpBranchName,#drpResState,#drpOffState,#drpNativeState {
width:200px;
}
#drpIdentification {
width:220px;
}
#drpAddressProof {
width:253px;
}
#txtResAdd,#txtOffAdd,#txtNativeAdd {
width:350px;
border:1px solid red;
}
#txtCustNo {
margin-left:2px;
}
#txtBirthDate {
margin-left:8px;
}
#drpIdentification {
margin-left:6px;
}
#drpAddressProof{margin-left:-3px;}
#txtIDExpiryDate{margin-left:14px;}
#txtAddExpiryDate{margin-left:14px;}
#drpResCity,#drpOffCity,#drpNativeCity{margin-left:16px;}
#txtIDIssuedAt{margin-left:8px;}
#txtIDIssueDate{margin-left:1px;}
#drpResState,#drpOffState,#drpNativeState{margin-left:0px;}
#cmdSubmit{margin-left:50%;margin-top:10px;width:80px;height:30px;}
.date,.num{display:none;color:red;font-weight:bold;margin-left:3px;}
/*Custom validator Styling*/
#opendate,#reqdopendate,#birthdate,#restelno,#resmobno,#offtelno,#offmobno,#nativetelno,#nativemobno,#telno,#mobno,#monthincome,#idexpirydate,#addexpirydate,#idissuedate,#addissuedate{color:Red;font-weight:bold;margin-left:3px;}
#birthdate1,#resmobno1,#offmobno1,#nativemobno1,#mobno1,#idissuedate1,#addissuedate1{color:Red;font-weight:bold;margin-left:-7px;}
#easyTooltip {
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
color:#fff;
}
#Validation {
height:auto;
width:auto;
margin-left:20px;
}
Could be a local cache issue? trying clearing you browser cache and reloading page
failing that your id's are wrong. Or you are trying to use it to style something that isn't applicable (margin-top/bottom on an inline element for example)