For something like the following:
<div class="example">
<div id="label">
Label text
</div>
</div>
The following CSS is able to style 'Label text'
.example #label {
color: red;
}
But it does not work with fluentUI mergeStyles:
const RedLabelStyles = mergeStyles({
".example #label": {
color: "red"
}
});
I know it's a problem with the selector, not the CSS itself, because the following correctly applies styles:
const RedLabelStyles = mergeStyles({
"#label": {
color: "red"
}
});
Was due to the RedLabelStyles selector being applied to the <div class="example"> itself. It works as expected if the JSX is as follows:
<div class={RedLabelStyles}>
<div class="example">
<div id="label">
Label text
</div>
</div>
</div>
Related
i've try using ::first-line but it bold all my p tags in array , the result i would like to want is bold only first p tags which is "Hello"
<div v-for="item in first" :key="item.id">
<p class="cat_name" >{{item.name}}</p>
</div>
<style scoped>
.cat_name >>> p::first-line
{
font-weight: bold;
}
</style>
Way 1- Use loop index
As you said if you only want to bold the first element then you can simply use the index of the loop and assign the bold class only to the first element.
Working demo-
new Vue({
el: "#app",
data() {
return {
first: [
{
id: 1,
name: "Hello"
},
{
id: 2,
name: "Bye"
},
{
id: 3,
name: "Nice to meet you"
}
]
}
}
})
.cat_name
{
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(item,index) in first" :key="item.id" class="list">
<p :class="{'cat_name': index == 0}" >{{item.name}}</p>
</div>
</div>
Way 2- Use :first-child rule
:first-child CSS rule will also work but remember "The :first-child CSS pseudo-class represents the first element among a group of sibling elements." That means all p elements should look like this-
<p>Hello</p>
<p>Bye</p>
<p>Nice to meet you.</p>
But if resolve your current loop HTML, it will look like this-
<div>
<p>Hello</p>
</div>
<div>
<p>Bye</p>
</div>
<div>
<p>Nice to meet you</p>
</div>
Where all p elements are wrapped inside an individual div element which makes them no longer siblings to each other and that's why the :first-child CSS rule will apply to all p elements because every p element is the first child of its parent (div) element.
So, if you want to go this way then loop directly on p elements.
Working demo-
new Vue({
el: "#app",
data() {
return {
first: [
{
id: 1,
name: "Hello"
},
{
id: 2,
name: "Bye"
},
{
id: 3,
name: "Nice to meet you"
}
]
}
}
})
.list p:first-child {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="list">
<div>
<p v-for="(item,index) in first" :key="item.id">{{item.name}}</p>
</div>
</div>
</div>
Note-
If looping directly on p elements is not possible then way 1 is recommended.
Try this
<div v-for="item in first" :key="item.id" class="list">
<p class="cat_name" >{{item.name}}</p>
</div>
<style scoped>
.list p:first-child
{
font-weight: bold;
}
</style>
Let's say we have a third-party CardComponent like this
<Card title="This is a title in the header">This is text in the body</Card>
And this renders in plain HTML
<div class="Card">
<div class="CardHeader"></div>
<div class="CardBody"></div>
</div>
And I'm using css modules for styling (scss in this case).
.customCard {
.CardBody {
color: red;
}
}
And then add the class to Card
import styles from ...
...
<Card className={styles.customCard} ...>...</Card>
Above will not work because it creates a generated class for CardBody like CardBody_sjkdh43. Is there a way to select non generated classnames in modules? Or is this only possible in the old fashion way to use a stylesheet?
Demo SandBox
It's an old question but the answer is :global() selector in css modules.
For more info: Exceptions - CSS Modules
Example the code:
<div class={styles.myClass}>
<SomeComponentWithOwnCss />
</div>
Output:
<div class="myClass_s4jkdh3">
<div class="SomeComponentWithOwnCss"></div>
</div>
And CSS:
.myClass div:global(.SomeComponentWithOwnCss) {
background-color: red;
}
Working example overhere: codesandbox
a small addition to #Closery's answer, you saved my ass man❤️.
you could try this for a more convenient approach with SCSS:
.parent :global {
.non-cssmodule-class {
color: red;
}
}
<div className={styles.parent}>
<div className="non-cssmodule-class" />
</div>
output:
<style>
.filename-parent__7MR41 .non-cssmodule-class { color: red; }
</style>
<div class="filename-parent__7MR41">
<div class="non-cssmodule-class"></div>
</div>
How can I select all a elements inside a p element that have a specific class name?
<div>
<p class="myClass">
This is
<div>
random
</div>
</p>
</div>
Remove the div inside the p tag:
<div>
<p class="myClass">
random
</p>
</div>
Then if you want to select all the a tags inside a p tag which you gave a class. You can do the following:
.myClass a {
}
May be you aren't able to target anchor tag(s) due to that div. Do you need that div before the anchor tag? Please refer to the code snippet below:
.myClass a {
color: green;
}
<div>
<p class="myClass">
This is
random
</p>
</div>
div *[href]
{
// css rules...
}
<div>
<p class="myClass"> This is
<div>
random
</div>
</p>
</div>
you can give a specific class name to a and call it like:
<a class="myA's" href="#">random</a>
CSS
a.myA's{
#do something
}
And in your case it should be:
.myClass > a{
#doSmthg
}
<p> can only contain inline elements,See here.
so,remove div inside p:
p.myClass a {
color: red;
}
<div>
<p class="myClass">
This is<br>
random
</p>
</div>
You need to change the <p> to <div> then use this
.myClass > div a { ... }`
or remove <div> inside the <p> and try this
p.myClass a { ... }
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
My HTML code looks as follows:
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Output A: <div class="dash_data_A"></div>
- Output B: <div class="dash_data_B"></div>
- Output C: <div class="dash_data_C"></div>
The display on the website looks as follows:
- Output A:
false
- Output B:
true
- Output C:
false
First wish: The output value should be on the same line (avoid line break), like this:
- Output A: false
- Output B: true
- Output C: false
Second wish: The output value should change the font color of false (red) and true (green).
Do I have to implement that in the css-file? Or in the js? Or even both? What do you recommend?
By default, a div is a block level element, which means it takes up the entire width and causes elements to continue on the next line, under it...which is what you're seeing. So to fix that, you need to change the display type of the divs that need to be inline OR use a different tag that is inline by default, such as span.
.dash_data_A,
.dash_data_B,
.dash_data_C {
display: inline-block;
}
To handle the color part, I would apply a class depending on what the result is, like this:
<div class="dash_data_A false"></div>
<div class="dash_data_B true"></div>
<div class="dash_data_C false"></div>
And then the CSS:
.true {
color: green;}
.false {
color: red;}
Add the following CSS:
.dash_data_A, .dash_data_B, .dash_data_C, .title {
float: left;
}
And then wrap the "output"-stuff in a div as well.
A quick JSfiddle, it's not perfect, but it functions. You should make it perfect yourself :)
You can also simplify the code too.
<div class="dash_data false"></div>
<div class="dash_data true"></div>
<div class="dash_data false"></div>
.dash_data {
display: inline;
//float: left;
}
1. one option using only css is
CSS
.dash_data_A, .dash_data_B, .dash_data_C, .title {
float: left;
}
.false{
color:red;
}
.true{
color:Green;
}
DEMO FIDDLE
2. second option
if the true,false values are generated dynamically use jquery
FIDDLE JS DEMO
JQUERY
var option = "";
$(function () {
$('.option').each(function () {
option="";
option = $(this).html();
alert(option);
if (option.trim() == 'true') {
$(this).addClass('true');
} else {
$(this).addClass('false');
}
});
});