Looking to style specific div elements with the same class name?
<div class="main">
<div class="banner_image"> banner 1</div>
<div class="banner_image ">banner 2</div>
<div class="banner_image ">banner 3</div>
</div>
You need to differentiate the styles for each individual div element by selecting them separately.
Wondering how to apply different CSS properties to divs with the same class name?
If you're in search of a way to target a specific element within a group, the :nth-child() selector is what you need. For instance, to style the second div with the same class, use this CSS:
CSS
.container div.item:nth-child(2) {
color: #00ff00;
}
Check out an example on JSFIDDLE
Latest fiddle update
http://jsfiddle.net/vtb7dsl9/8/
<div class="container">
<div class="feature_image">feature 1</div>
<div class="feature_image ">feature 2</div>
<div class="feature_image ">feature 3</div>
</div>
experiment with
nth-of-type(2) // for selecting element in middle
first-of-type // to select the very first element
last-of-type // to target the last element
Styling with CSS
.feature_image:nth-of-type(2) {
background-color: #00ff00;
color:black;
}
.feature_image:first-of-type {
background-color: cyan;
}
.feature_image:last-of-type {
background-color: magenta;
color:black;
}
.feature_image{
padding:15px;
}
When working with div elements, you have the flexibility to assign both an id and a class. This allows you to apply general styling to all divs with a particular class in the CSS, while also specifying unique styles for individual divs with specific ids.
<div class="main">
<div id="banner1" class="banner_image"> banner 1</div>
<div id="banner2" class="banner_image">banner 2</div>
<div id="banner3" class="banner_image">banner 3</div>
</div>
You can even utilize multiple classes for more dynamic styling:
HTML
<div class="main">
<div id="banner1" class="banner_image small">banner 1</div>
<div id="banner2" class="banner_image big">banner 2</div>
<div id="banner3" class="banner_image">banner 3</div>
</div>
CSS
.small {
font-size:10px;
}
.big {
font-size:20px;
}
I trust this explanation clarifies things for you. Happy coding!
Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...
There seems to be a problem with filtering an ng-repeat using a search box. <li ng-if="searchTab"><input type="text" class="form-control" placeholder="Search" ng-model="search" > </li> and then in the ng-repeat <div dir-paginate= ...
Is there a command in NPM that can display the minimum required Node version based on the project's modules? ...
While working on my latest project, I utilized react.js and encountered an issue where javascript seemed to stop working when using ReactDOM to render a class extended from React.Component. I noticed that the alert() method would not work if it was placed ...
I have 3 spans where 2 contain an alphabet each. The third span is left blank for the result of comparing the first 2 spans. I need to display the result in the last span, showing a value of 1 if the two spans contain the same alphabet. Can anyone sugges ...
[{"displayorder":"1","menuname":"DashBoard","menuid":"5","menuurl":"dashboard.php"},{"displayorder":"3","menuname":"Accounting Module","menuid":"3","menuurl":""},{"displayorder":"4","menuname":"My Profile","menuid":"4","menuurl":"myprofile.php"},{"displayo ...
I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...
Can someone help me identify what I might be doing incorrectly? I have a chained filter under computed that is giving me an error message stating 'product.topic.sort' is not a function. My intention is to use 'select' to provide sortin ...
In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...
This script dynamically generates a group of elements consisting of four input fields. Once an element is created, you can select or deselect it, which will trigger the corresponding editor to appear. I have implemented a function to specifically hide the ...
Within my ReactNative project, I am seeking to retrieve the content of static text files and store it in a string variable. Here is an example of how I would like to achieve this: var content = loadPlainTextFile("resources/tags.txt"); var tags = content.s ...
I am currently working on setting up a chain of promises with an error catch at the end within my node and express application. One issue I have encountered is that if any of the 'then' functions encounter an error, it can be difficult to trace b ...
While completing a basic programming assignment from my teacher, I encountered an interesting issue in Javascript. I found that when dividing a number by 1, it returns an unexpected value. Can anyone provide an explanation for this? I have created a jsfidd ...
ui-select does not permit the insertion of duplicate values in a select list item. However, I have a scenario where a user needs to input a value multiple times that will not be selected from the dropdown list. Is there a way to accomplish this using the ...
In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...
I'm having trouble adding a keypress event to the YUI rich text editor for Drupal. I've been attempting to use jQuery, but so far, I haven't had any success. ...
I am facing an issue with an image inside a div. Whenever I add a margin-top, the background of the div extends downwards, which is not the desired behavior. How can I fix this problem? Below is my code snippet: <div id="content"> <div class=" ...
Is it true that when I submit a form with an empty action field, it will automatically submit to the current page? How does this behavior change when using ajax requests? ...
Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...
While using the select method, I had this line of code: Person_name = $('#selectedPerson').val() When selecting 2 values, person_name.length displays as 2. Recently, I switched to checkboxes displayed in a table. However, when I use person_name ...