The Proper Usage of Commas in CSS

Check out this CSS code snippet.

.form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;}
.form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;}
.form-field TEXTAREA {height: 80px;}

If there is an input or textarea within the div.form-field, the specified css rules will be applied to them.

However, the issue arises when the css also gets applied to any INPUT[type='text'] elements, even if they are not inside a .form-field. How can this behavior be prevented?

htmlcsscss-selectors

Answer №1

.form-field TEXTAREA, .form-field INPUT[type='text']{

Answer №2

The comma serves as the separator for the complete selector. Therefore, 

.form-field TEXTAREA, INPUT[type='text']
targets both .form-field TEXTAREA and INPUT[type='text'].

If you're looking for an alternative, you can explore the :matches() selector. Currently, this feature is only supported in FireFox under the :-moz-any() selector. This syntax allows you to do:

.form-field:-moz-any(TEXTAREA, INPUT[type='text'])

However, a more universally accepted approach would be:

.form-field TEXTAREA, .form-field INPUT[type='text']

On a side note, it's recommended to use lowercase for HTML tag names. Thus, you should consider using:

.form-field textarea, .form-field input[type='text']

Answer №3

Oops, you were looking for OR functionality, please disregard this.

The + "Matches any A element immediately followed by a sibling element B." Source: W3

.form-field SELECT + INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;}

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

Using just one "nav.php" file for both the homepage and subdirectories

Looking to enhance the efficiency of my websites, I have implemented a PHP file for navigation, footer, sidebar, and other elements. However, this current method involves using two separate files: one for the homepage and another for the remaining pages wi ...

phphtml

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

javascriptcssreactjsmaterial-ui

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?

I need to find and click on the link labeled "Customer One". The current xPath I am using is: //div[contains(@class,'client-info') and contains(div/text(),'Customer')] When using Firepath, this xPath returns four separate elements (I ...

htmlxmlseleniumxpathwebdriver

Trouble with CSS Class Showing Up Only When Hovered

My goal is to make the .panel-text element visible only when a user hovers over the panel. I attempted to use the overlay CSS class, but I encountered issues where the text either wouldn't show at all or would always be displayed. Here is what I have ...

htmlcss

Div with hidden scrollbars for smooth scrolling experience

Is there a way to create scrollable DIV's without visible scrollbars? While Mac OS 10.7-8 display no visible scrolls, other operating systems like Windows, Mac OS, and Linux show the scrollbars. How can I achieve scrollable divs without the scrollbars ...

htmlcss

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

htmlnode.jsreactjsbootstrap-4reactstrap

Establishing the default scroll position in tables using React.js

How can I set the initial scroll in ReactJS Material-UI tables? I'm working with a table that has numerous columns and I would like to have specific columns in view automatically without having to scroll, essentially establishing an initial scroll. I ...

javascripthtmlcssreactjsmaterial-ui

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

pythonhtmlselenium-webdriverweb-scrapingpopup

Is there a method to exclude children objects from spring animations during application?

Is it possible to create a fading in and out effect for a div (for example, to cycle through different backgrounds) while keeping its children (such as text) visible at full opacity at all times? {transitions((style, <animated.div class={ bg[i] + ...

htmlcssreactjsreact-spring

Troubleshooting a Vue.js formatting problem in Visual Studio 2019

Encountering an issue with VS2019 while attempting to format this code section. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="milestone.ascx.cs" Inherits="uc.dms.milestone" %> <section class="content-header"> <h1> ...

javascriptc#htmlvue.jsvisual-studio-2019

When the web browser page is zoomed out (Ctrl -), elements do not appear to float

Can you test resizing the window to the minimum (CTRL-)? Here's the link: http://jsfiddle.net/Zty9k/13/ This is the HTML code: <ul> <li><img src="http://i.imgur.com/PBuDAFH.gif"></li> <li><img src="http://i.i ...

csscss-floatborderelementzooming

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

In the center of a full-screen hero section, there is a form. When it reaches the top, its position becomes fixed and additional classes are added through a script - such as shrinking its height and adding a background. What I aim to achieve is for the fo ...

javascriptjqueryhtmlcss

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found Howeve ...

cssreactjs

Adjust the background color of the dropdown menu

I'm struggling to change the background color of the property address picker dropdown from transparent to white. I've been trying different things but can't seem to get it right. Any suggestions? Additionally, I want to change the cursor to ...

jqueryformscss

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...

javascripthtmlcsstwitter-bootstrap

Putting off the execution of a setTimeout()

I'm encountering difficulties with a piece of asynchronous JavaScript code designed to fetch values from a database using ajax. The objective is to reload a page once a list has been populated. To achieve this, I attempted to embed the following code ...

javascriptajaxhtml

Web-based client services

Context: An HTML file I'm working with takes in multiple parameters and utilizes JavaScript to dynamically render the content. The page pulls data from various local XML files for processing. For instance, accessing service.html?ID=123 displays info ...

javascriptjqueryhtmlajax

A guide on encrypting the data of a file that is uploaded in Meteor.js

As a newcomer to Meteor and coding in general, I have completed tutorial projects and examples and now feel ready to start my own project. I want users to be able to select a file from their computer using an input field, read the contents of the file, and ...

javascripthtmlhashmeteor