Hide a CSS class when it is the only one present

Is it possible to set the display option to none for a css class only when it is used alone, without affecting it when used with another class?

Let's consider how the HTML code looks when I want to display the biography class:

<div class="user biography">
  <p>Content</p>
</div>

But if I want the biography class to be hidden using display: none when it is not accompanied by the user class:

<div class="biography">
  <p>should hide</p>
</div>

The challenge arises because simply applying .biography { display: none; } hides the biography class in both scenarios. How can this be achieved while ensuring it remains visible when combined with other classes?

htmlcss

Answer №1

To target specific elements with a class value of biography, you can utilize the attribute selector [class='biography']. This selector will apply styles to all elements that have the exact class value of biography.

[class='biography'] {
  display: none;
}
<div class="user biography">
  <p>Content</p>
</div>
<div class="biography">
  <p>should hide</p>
</div>

Answer №2

To determine if the class matches the exact name, you can utilize the attribute selector

[class="biography"] {
  display: none;
}

Elements with class="biography" will be the only ones that match.

Answer №3

One method you can employ is utilizing the :not pseudo-selector:

.biography:not(.user){
  display: none;
}

Answer №4

To solve this issue, you can create a new class and only apply the display:none property when both classes are present:

<div class="profile info">
  <p>Information</p>
</div>
<div class="info hidden">
  <p>will be hidden</p>
</div>
<style>
.info.hidden {
  display: none;
}
</style>

Answer №5

.profile-info {
    visibility: hidden;
}

.profile-info.user-details {
    visibility: visible; 
}

Answer №6

In my opinion, it's best to set the default as display:none and change it to display:block when necessary, such as when the element is inside a certain class. Here's an example of how you can achieve this:

.user.biography {
  display: block;
}

.biography {
  display: none;
}
<div class="user biography">
  <p>Content</p>
</div>



<div class="biography">
  <p>should hide</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

unable to apply background to entire section

After using HTML5 and jquery to create a section, I attempted to set an image as the background. However, the image is not filling the entire section, leaving a 2px space around all sides inside the section. Below is the code I used: <div id="container ...

jqueryhtmlcss

Enhancing visual aesthetics with Vuetify on v-slot label components

I am working with Vuetify code that appears like this <v-radio-group v-model="gender" column class="radio-group-full-width"> <v-radio value="Boy"> <template v-slot:label> <v-textarea v-model="answer" v-vali ...

cssvue.jsvuetify.jsv-slot

Creating a dropdown menu with a blur effect using CSS

I attempted to match the opacity and blur effect of my dropdown menu with that of my navbar. While the opacity adjustment worked correctly, the blur effect did not apply as expected. I've heard that I need to utilize a pseudo-class to achieve this, b ...

cssdropdownnavbarbootstrap-5blur

Position the navbar as an overlay when expanding, instead of pushing down the page contents

Is there a way in bootstrap 4.0 to have the navbar overlaying the contents of a page when it expands from the collapsed state, instead of pushing the contents down? I've experimented with setting z-index properties on the navbar and other classes, as ...

cssbootstrap-4

What is the method for creating a border around text like the Google login feature?

Did Google update the login TextBox to look like this today? https://i.sstatic.net/bXPQu.png There is a border around the text, what is the most effective method to achieve this using HTML & CSS? Update: A single answer can be found on StackOverflow ...

htmlcss

Tips for utilizing ng-model in an Angular application

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}" ng-model="icon.name" list="classIcon" ng-change="changeFn(icon.name)"> <i class="{{$select.selected}}"></i> &nbsp;&nbsp; {{$s ...

angularjshtml

PHP: Dynamically adjust image size from database to fit different screen sizes

Managing a website with various categories means each category has its own assigned image stored in the database. So, when a product from a specific category like bikes or chairs is displayed on the website, the corresponding image needs to be retrieved an ...

phphtml

Angular routing template failing to execute inline JavaScript code

I'm facing an issue with my Angular.js routing implementation. I have successfully displayed the HTML code in templates using angular.js, but now I am encountering a problem with my template structure: <div id="map_canvas" style="width:95%; heigh ...

javascripthtmlangularjs

Forming a row in flexbox with consistent layouts *across each line*

I want to create a flexbox layout where all the titles are aligned in a row. Here are the requirements: The images may vary in height The descriptions may vary in height The title could be displayed in 1 or 3 rows, depending on its length. Check out thi ...

htmlcssflexbox

Get these click functionalities functioning without relying on jQuery

I have designed a vertical menu with multiple sub menus. Each menu contains at least 3 sub menus, and the sub menus are set to open only when their parent menu is clicked. (I require jQuery support for this menu) However, since I do not use jQuery on any o ...

htmlcssfonts

POST method now includes the conversion of line breaks from to upon entering

I created a basic test page named page1.html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> function submitForm() { aler ...

javascripthtmlhttpposthttp-post

Is it possible to have a <small> element nested within an HTML5 heading such as h1, h2, h3, etc?

I am curious about the proper way to structure headings in HTML5. Can I include a <small> element within an <h3> tag? For example: <h3>Payment details <small>(this is your default card)</small></h3> ...

htmlw3c

Scroll horizontally based on mouse movement

My angular directive that enables me to choose the content of table cells is performing as expected. However, I encountered an issue when attempting to select multiple cells at once - the scrollbar does not move, hindering my ability to select the cells. ...

javascriptcssangular

What is the best way to connect users for chatting?

I am currently developing a cutting-edge chat application with a real-time communication server that allows me to send and receive messages seamlessly. The next step in my project involves mapping users for private real-time communication. I'm faced w ...

javascriptjqueryhtml

Firefox causing line-height problem

Having an issue with styling a search button in Firefox. The input submit is created using an iconic font, white background, and border-radius as shown below: display: block; width: 60px; height: 60px; line-height: 60px !important; padding: 0; background: ...

htmlcssgoogle-chromefirefoxicon-fonts

Initially unchecked Django Model Boolean Field with initial=False and required=False does not seem to be functioning as intended

Forms.py class CustomPostedForm(forms.ModelForm): posted = forms.BooleanField(required=False, initial=False) Views.py postform = CustomPostedForm(request.POST, instance=author) if postform.is_valid(): postform.save() ...

htmldjangodjango-modelsdjango-forms

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

javascripthtmlcss

Ways to extract variables from a component and utilize them in App.js

Despite my efforts to search online, I could not find the answer or understand what I needed to. My issue: I need the "inputVal" variable from the "InputField.js" component to be accessible in the "App.js" component (specifically in the fetch request where ...

javascripthtmlreactjsfrontend

Is there a way to prevent users from copying data or switching tasks when using my program or website?

Is it feasible to develop a website or application for Windows desktop machines that can remain focused until the user completes a specific task? For instance, if my YYY app/website is open and I require the user to input some text, I want to restrict the ...

javascriptc++windowsvisual-studio-2010html

Submit the chosen options as an array

I am working with a select list in HTML that looks like this: <input type="checkbox" name="drive_style" value=1 checked />123<br /> <input type="checkbox" name="drive_style" value=2 />123<br /> <input type="checkbox" name="drive ...

phphtmlajaxselectarrays