Hide The First Div With Specific Class February 28, 2024 Post a Comment I want to hide (display:none) the first div with class .leftAddress Here is css fieldset .leftAddress:first-of-type{ display:none; } Here is html Solution 1: CSS Based Answer :With CSS, there is no direct way to do this as far as I am aware. However, you can do the below as a work-around solution.fieldset.leftAddress { display:none; } fieldset.leftAddress ~ .leftAddress { display: block; } CopyExplanation: The first rule sets the display as none for all elements with .leftAddress class under the fieldset and then the second one sets display to block for all elements with .leftAddress class which also has a preceeding sibling with the same class. Thus in total, the first element with class as .leftAddress remains hidden.CSS Solution Demo Note: As pointed out by xec in comments, the CSS solution works only when used on elements which are siblings. If they are not and say there is one element with class='leftAddress' inside a wrapper (another level) within the fieldset, both the first .leftAddress in the fieldset and the first .leftAddress within the wrapper in the fieldset will get hidden (like here). So, in essence it hides the first element with that class within the same parent.Baca JugaWhy Doesn't Nth-of-type Work On An Image Wrapped In An A Tag?Css Selector To Select First Instance With Nth-type-of(1) Fail When Markup ChangedExtending Css Selectors In BeautifulsoupJavascript Based Solution:If you don't have any problems with using Javascript to achieve this effect, you can do it using the below code. This solution doesn't have the limitation mentioned in the CSS based solution (sample can be seen here).window.onload = function(){ document.getElementsByClassName('leftAddress')[0].style.display = 'none'; } Copydocument.getElementsByClassName('leftAddress')[0] - Gets the first element in the DOM with class name as leftAddress. The [0] is mandatory because getElementsByClassName returns a list of nodes (as the plural name suggests) and hence we have to reference it like we do with any array.style.display = 'none' - Javascript equivalent of the CSS display: none.JS Solution DemoNote: As mentioned in Point 1, this currently hides the first element with that class within the entire document. If you want to restrict it to the first element with that class within the fieldset, that can also be done. Share You may like these postsHtml Img Align="middle" Doesn't Align An ImageType Arabic Font In Html Text FieldsHow Do I Submit A Post Variable With Javascript?Loading Javascript In Body Onload With 2 Functions Post a Comment for "Hide The First Div With Specific Class"
Post a Comment for "Hide The First Div With Specific Class"