I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello".
https://i.sstatic.net/l0Ss6.png
<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>
To only bold the first element in a loop, you can simply use the loop index to apply the bold class to the first item.
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>The CSS :first-child rule can also be used, however, remember that "The :first-child CSS pseudo-class represents the first element among a group of sibling elements." This means all p elements should follow this structure-
<p>Hello</p>
<p>Bye</p>
<p>Nice to meet you.</p>
If your loop-generated HTML looks like this-
<div>
<p>Hello</p>
</div>
<div>
<p>Bye</p>
</div>
<div>
<p>Nice to meet you</p>
</div>
Where each p element is wrapped within an individual div, they are no longer siblings to each other. As a result, the :first-child CSS rule will apply to all p elements since every p element is the first child of its parent div element.
If you still prefer this method, then directly target the p elements in your loop.
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>If looping directly on p elements is not feasible, it is recommended to utilize Method 1.
Check out this example below
<div v-for="product in items" :key="product.id" class="product-list">
<p class="product-name" >{{product.name}}</p>
</div>
<style scoped>
.product-list p:first-child
{
color: blue;
}
</style>
My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...
I am looking to create a 'settings' div that adjusts its width based on the available space on a page. This could range from 1000px to 600px, and I want the div to always be next to the 'title' div without wrapping onto the next line. F ...
When dealing with payload.key as a key such as foo, the code appears to be functioning correctly. But how can one update the value of a nested child key like foo.bar.a? export const mutations = { USER_UPDATE(state, payload) { console.log(payload); ...
I am working on implementing a new feature in AG Grid where I want to display an info icon in the header along with a tooltip that appears when the icon is hovered over. I have already created a custom tooltip component that works correctly, but once I a ...
In my Vue 3 + Typescript app, using `npm run build` compiles the app into the `dist` folder for deployment. I have a web worker typescript file that I want to compile separately so it ends up in the root of the `dist` folder as `worker.js`. Here's wha ...
I'm struggling to retrieve data in my Vue component. I pass data from view to component using props like this, while working with Laravel: <fav-btn v-bind:store="{{ $store }}"></fav-btn> Here is how my component is structured: <templ ...
Simply put, the issue is this: Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%? I often have to adjust the percentages differently dependin ...
I am facing an issue with my logo being resized to a much smaller size of 200px even though it is originally over 2000px wide. In the style.css file, I found the following code: .custom-logo { max-width: 180px; } Despite changing the max-width value t ...
In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...
I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...
Having just started working with Nuxt.js, I encountered an unusual issue. There is an endpoint in my backend API that allows users to reset their password by sending a token along with a new password. Although the request is being sent correctly and the s ...
.html <lightning-tabset variant="vertical" > <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab> <lightning-tab class=" ...
Currently, I am working on creating a very basic web page that is divided into two parts. Each part will have its own HTML file: Welcome.html & Welcome.css: <html> <head> <link rel="stylesheet" type="text/css" href="Welcom ...
Recently, I started utilizing the spatie media library to handle image uploads to both storage and database. In my current project, I am working on displaying multiple images within a Vue component, and below is the snippet of my Controller code: public fu ...
After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional co ...
I'd like to add a toggleable class to either the body element or the root element("#app") when the button inside the header component is clicked. Header.vue : <template lang="html"> <header> <button class="navbar-toggler navbar-tog ...
I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...
For simple webpages, my general rule is to utilize viewport units as they provide a lot of flexibility to the website. However, when dealing with complex webpages, I usually opt for media queries. In some cases, especially intermediate ones, I find it ben ...
Hey there! I've been experimenting with fading images in and out of this gallery. I tried using the following code: $('#slides').fadeTo(3000, 0.0); If you want to check it out, here's a link to my pen: https://codepen.io/anon/pen/gwRX ...
Could you assist me in improving the design to enhance data clarity? Your help would be greatly appreciated. Thank you for your anticipated response. CSS File: table-layout: fixed; width: 100%; border-collapse: collapse; table-layout: fixed; ove ...