In the following HTML snippet, we have a div#parent with multiple child elements:
<div id="parent">
<div id="ch1"></div>
<div id="ch2"></div>
<div id="ch3"></div>
....
<div id="ch1234"></div>
</div>
The question is: How can we create a CSS selector that applies specific styles to all children of div#parent except for div#ch1?
To select specific child and sibling elements, you can utilize combinators in CSS:
#parent > div + div
In this case, div + div targets any div that directly follows another one, excluding the first child.
An alternative approach is to use the ~ combinator instead of +:
#parent > div ~ div
Another option is to leverage CSS3 pseudo-classes, keeping in mind they are not compatible with older versions of Internet Explorer (IE8 and below):
#parent > div:nth-child(n+2)
#parent > div:not(#ch1)
To exclude a specific element, you can utilize the :not selector:
#container :not(#section1) {
custom styles here
}
Find out more about the :not selector on Mozilla Developer Network.
To avoid using any specific id like many other answers suggest, simply utilize the parent id in the following manner:
#parent div:nth-child(1) ~ div
{
/*add your styles here*/
}
Select all subsequent child div elements of the parent and then apply CSS formatting using the ~ selector for non-first children!
Here is a tip for applying styles to all list items except the first one:
#parent div:nth-child(n+2) {
...
}
This CSS code will help you achieve this, regardless of how many list items you have.
For a live demonstration, check out this example on http://jsfiddle.net/vzyWq/
If you encounter similar situations in the future, feel free to utilize this tool:
To easily apply styling changes, assign a specific class to the elements you want to modify and then define that class in your CSS.
<div id="container">
<div id="child1"></div>
<div class='customStyle' id="child2"></div>
<div class='customStyle' id="child3"></div>
....
<div class='customStyle' id="child1234"></div>
</div>
.customStyle{color:blue}
I hope this explanation is helpful for you.
This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...
How can I randomly select a background picture (out of 4) for my homepage on a personal website using Flask? Despite my attempts to create an HTML template with inline CSS, the selected image does not display as expected. I've already tried using url ...
Greetings, dear community members, I am currently utilizing angular along with angular material in my projects. By default, when a material dialog is opened, it slightly darkens the background. However, I am interested in having a blurred background inst ...
Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...
I'm currently working on creating a sortable CSS grid using jQuery UI. $( function() { $( "#sortable" ).sortable({ handle: "handle" }); }); gridHolder{ display:grid; background:tan; grid-template-columns: ...
I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...
I'm currently working on a registration form that includes an input field for telephone number. I'd like to implement a feature where, upon filling out the form, the telephone input field automatically displays the country code by default. Would ...
I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...
I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...
A message can be sent based on the user's choice of either Now or Later. If the user selects Now, the message will be sent immediately. If Later is chosen, a date format option needs to be created for setting a future date. <label for=""& ...
I utilize PHP variables to store the title's value and the ID of the body. The latter is a method to show which section of the page the user is currently on (in this case, the "home" section). At the start of my index.php: <?php $title = "New ...
It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...
I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...
I am dealing with a situation where my page contains "domain relative URLs" like ../file/foo or /file/foo within a href attributes, img src attributes, video, audio, web components, js ajax calls, etc. The issue arises when these URLs need to be relative ...
I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue. My objective is to have a dropdown animate down w ...
I am working on an HTML page that has a TextArea and label. My goal is to create CSS classes in the TextArea and apply them to the label: <textarea id="txtCSS" name="txtCSS" rows="4" cols="50"> .FC{color:gr ...
I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...
When using a div element on its own, it automatically adjusts its height to fit its contents. I am trying to achieve a layout where a parent div contains two child elements: another div (or left-aligned image) and an unordered list (ul). The inner div (or ...
Using XSL version 1.0, I am populating an HTML table with percentage values from XML. My goal is to display the highlighted color of the percentages based on a condition, but the condition is not being processed as expected, leading to the exclusion of the ...
In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...