I have two css classes
.circle-btn{
}
.circle-btn-medium{
}
Hhowever both classes having their own properties. But at hover property I want to use same background color for both.
One solution i found is what to use hover property seperatly as follows
.circle-btn:hover
{
background-color:#39C11E;
}
.circle-btn-medium:hover
{
background-color:#39C11E;
}
So instead of using hover property separately is it possible to use this property with different classes at same time so I can optimize my coding?
You can minimize it by joining the 2 class in to one ..
.circle-btn:hover ,
.circle-btn-medium:hover {
background-color: #39c11E;
}
You can use one or two classes in your html. So -medium will be modifier, which responce only for size.
For example:
css:
.circle-btn{
}
.circle-btn-medium{
}
.circle-btn:hover
{
background-color:#39C11E;
}
html:
<!-- common circle-btn -->
<button class="circle-btn">circle button</button>
<!-- medium circle-btn -->
<button class="circle-btn circle-btn-medium">circle medium button</button>
By the way, this is bootstrap way. Just look, for example, to their buttons sizes modifiers.
Related
I have multiple css classes that make up a button using SCSS.
.ghost-button {
// CSS goes here
}
.ghost-button-label {
// CSS goes here
}
.plus-circle {
//CSS goes here
}
Using Angular I can control the disabled state using the following feature.
[class.disabled]="booleanFlag"
I wanted to have a disabled state for this button with out having multiple disabled classes like so,
.ghost-button.disabled {
// CSS goes here
}
.ghost-button-label.disabled {
// CSS goes here
}
.plus-circle.disabled {
//CSS goes here
}
This is an example of what I am trying to do. This did not work for me.
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
Here is the markup I use for the button,
<div style="padding-top: 10px" (click)="handleClickAdd($event)">
<div class="ghost-button ghost-button-label icon-custom icon-margin plus-circle plus-circle-position" [class.disabled]="blockAdditions">
<div>
<div>Add</div>
</div>
</div>
</div>
Is there a way to do this? Thanks.
This doesn't work because it means each class is a descendant of the previous:
.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}
If you're trying to just select that one div with all four classes, just remove the spaces:
.ghost-button.ghost-button-label.plus-circle-position.disabled {
//CSS goes here
}
If you're trying to select any elements that have the disabled class plus one of the three other classes, then you use commas to separate the different combinations:
.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
// CSS
}
Of course you could just select .disabled if you want this CSS applied to every element with the disabled class:
.disabled {
// CSS
}
Just be sure to take into account View Encapsulation. You may need to put this CSS in the global style file styles.css if this class exists in more than one component.
Just a note, you are not setting the disabled state here, you are adding a class with the name "disabled". disabled is a boolean attribute you can set via HTML, which you can then select with the pseudo-class :disabled.
button:disabled {
color: red
}
<button>Not Disabled</button>
<button disabled>Disabled</button>
If this is what you were actually trying to do then in Angular it would be:
[disabled]="booleanFlag"
You can target a disabled element with the :disabled pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
So depending on the relationship between your button/label/plus-circle you should be able to target those as well based on whether the button is disabled. For example, if the button and label are siblings you could do this:
.ghost-button:disabled,
.ghost-button:disabled + .ghost-button-label,
.ghost-button:disabled + .plus-circle {
// CSS goes here
}
That would only work if the label and circle were siblings that come after the button, if they are before the button, you can't select them that way.
how do you apply a specific css to second-page
HTML
<div className = "section-header second-page">SOME MESSAGE</div>
Assuming the above:
CSS
.section-header {
background-color: black,
}
i want to apply a different background color specifically to second-page that does not modify section-header.
If you want the styling to apply to any element with .second-page class you should use:
.second-page {
backgound-color: red,
}
If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:
.section-header.second-page {
backgound-color: red,
}
When there's no space between two classes, it means it refers to an element with both classes.
For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp
Your HTML should be:
<div class="section-header second-page">SOME MESSAGE</div>
Your CSS could be:
.second-page {
background-color: black,
}
You can mix multiple classes within the HTML or target them separately.
If you need to validate your HTML code you can use this free service:
https://validator.w3.org/#validate_by_input
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I need to do:
<p id="un_but" class="blue_but" class="radius_right">SignUp</p>
but this does not work.
Obviously I could just combine the class properties but I was wondering if there is another way perhaps
<p id="un_but" class="blue_but radius_right" >SignUp</p>
dom element(p) can have only ONE attribute(class), but with multiple values separated by space
One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>
This sets the following three classes on that paragraph tag:
pullquote
btmmargin
left
You would assign these as generic classes in your CSS:
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
You can use the important keyword to set precedence over different classes.
For example:
.pullquote { width :15 px !important }
.btmmargin { width:20px }
p.left { ... }
In the example above 20px width attribute will have more precedence.
I have a slider that's marked up like so:
<div class="slider wide">
//slider html in here
</div>
And another marked up like so:
<div class="slider narrow">
//slider html in here
</div>
Is it possible to reference each of these like this in my CSS file by in a way concatenating the class names:
.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css specific to the wide slider goes here }
No, you make three classes .slider, where you put common slider css, and .narrow where you put narrow slider specific css, and .wide where you put wide slider specific css.
.slider { //css common among all sliders goes here }
.wide { //css specific to the wide slider goes here }
.narrow { //css specific to the narrow slider goes here }
Yes, .slider.narrow is valid. It's not exactly concatenating the class names, it's making two different class selectors and applying them to the same element. So .narrow.slider is also valid and will match the same elements.
The problem with using multiple class selectors against a single element is that is doesn't work in IE6. This browser will ignore all but the last class selector. So to support that browser you typically end up using something like class="slider wide-slider".