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>
Related
Hi i want to access the parent element from child element in JSS, can any one help on this Please
<div className="parent">
this is parent
<div className="child">this is child</div>
</div>
Use Element.parentElement.
I think this code can help you.
I can't write react code here, so I wrote it pure HTML, CSS, JS code.
function myfunction() {
var child = document.getElementsByClassName('child')[0];
child.parentElement.style.color = "blue";
}
.parent {
color: red;
}
.child {
color: green;
}
<div class="parent">
this is parent
<div class="child">this is child</div>
</div>
<button onclick="myfunction()">click me</button>
you cannot select a parent in CSS
however you can start from the parent and use whatever Pseudo selector
for example I select the first parent element using first-child
then applied the styles I want to MuiCard-root class
"&:first-child": {
"& .MuiCard-root": {
marginTop: 0,
},
},
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>
Is it possible to target an element based on its counter value? For example could I bold an element when my-counter is 10? So something like this:
body {
//initialize the counter with a starting value of 5
counter-reset: my-counter 5;
}
.some-class::before {
// increment and insert the counter value in the element
counter-increment: my-counter;
content: counter(my-counter);
}
// is something like this possible?
.some-class::before::my-counter(10) {
// target the element when its counter is 10
font-weight: bold;
}
For context, I'm doing this to make a responsive list (yes, 12 days of Christmas) where the same day is highlighted at all sizes.
You could either use scripting, or, if the elements are next to eachother, nth-child(x)
div.counted:nth-child(10){
color: red;
}
<div>
<div class="counted">1</div>
<div class="counted">2</div>
<div class="counted">3</div>
<div class="counted">4</div>
<div class="counted">5</div>
<div class="counted">6</div>
<div class="counted">7</div>
<div class="counted">8</div>
<div class="counted">9</div>
<div class="counted">10</div>
<div class="counted">11</div>
</div>
div[data-count='1']{
color: red;
}
<div>
<div data-count="1">1</div>
<div data-count="2">2</div>
<div data-count="3">3</div>
<div data-count="4">4</div>
<div data-count="5">5</div>
</div>
You can avoid using nth-child if you modify the structure of your numbers by having another custom attribute like data-count with the desired value, which can be easily be selected using css.
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 { ... }
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');
}
});
});