What is the CSS syntax for styling children that are not immediate descendants?

My query is about whether it's appropriate to reference a child of an element that is not a direct child.

Imagine having this HTML structure:

<form class="formation">
   <p>
      <span>
         <input class="phone input">
      </span>
   </p>
   <p>
      <span>
         <input class="text input">
      </span>
   </p>
</form>

If you want to style the inputs just within that form using CSS, can you simply target the form class followed by the input class without specifying the elements in between like so:

.formation .input {
    width: 10px;
}

Does this method work correctly?

In my past projects, I have used similar techniques which seemed to work fine. However, for a current media query on a Wordpress site, it doesn't appear to be following this convention. Is this a flawed approach or is there something fundamentally wrong with it? Your insights are appreciated!

Answer №1

Avoid unnecessary complexity in your CSS by keeping selectors concise and focused on specific elements. This practice not only improves performance, but also simplifies future updates to your markup structure. By selecting elements based on their unique characteristics rather than their full DOM path, you can easily adapt your styles if elements are added or removed. Remember to balance specificity with context to ensure your styles apply correctly and avoid unintended effects on other elements.

Answer №2

Absolutely, it will work perfectly. The use of .form .input in your CSS allows for the selection of any number of nodes between these two classes.

If you had used .form > .input, then your CSS would not have matched at all. The > symbol is the "immediate descendant" selector, so

.form .input { color: green }
.form > .input { color: red }

<div class="form">
   <div class="input">This text will be red</div>
   <div class="whatever">
      <div class="input">This text will be green</div>
   </div>
</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

What is the best way to generate a fresh JSON object within a react hook function?

I am currently facing two issues. Firstly, I am having trouble figuring out how to add/update the JSON items within a hook. Secondly, React seems to be restricting me from using the name that is stored in a previous JSON file. I am open to exploring alter ...

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

I have a requirement to automatically place the cursor on a specific field whenever a rich tab is navigated to. I attempted using onclick and onlabelclick on the richTab, but it did not work as expected. Then, I tried utilizing ontabenter, which called my ...

The information in the table is spilling out beyond the boundaries

I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the d ...

What is the process for updating the image credit in WordPress?

Is there a way to modify the image author (uploaded by) within the WordPress media library? https://i.stack.imgur.com/zvgfu.jpg ...

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

Extraction of Canonical URLs

I am completely new to VBA programming and I need assistance with extracting links related to specific keywords from a website. My goal is to have these sourced links as the final outcome for all keywords in my list using a VBA program. The code I've ...

Utilizing personalized CSS for specific ioslides

If I decide to stick with the default data and presentation of a new ioslides, changing only the second slide (## R Markdown) without affecting the entire item, how can I do this by setting up the css document accordingly? My goal is to simply adjust the f ...

Encountering an unusual overflow issue in mobile with React

When viewing on smaller screens, that specific section is visible. To ensure it remains visible, adjust all the div elements to 100vw. Any suggestions on how to accomplish this? Looking for recommendations on how to handle this situation. ...

Struggling to properly position navigation bar items in a Bootstrap website

I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-f ...

Utilize HTML5 to enable fullscreen functionality for embedded SWF files

I have implemented a function that handles the click event of a button to toggle a DOM element into fullscreen mode. The function works well, but I am facing an issue when there is another div containing a swf inside the main div. var elem = document.getE ...

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

In preparation for a workshop, I am creating HTML slides using the xaringan package in R, which is based on remark.js. These slides are made with RMarkdown, and while this approach has been effective, I have encountered a need to disable slide numbers on s ...

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

The various sections of my website are neatly tucked away under one tab, only revealing themselves to users as they click on each individual tab

My recently published website is experiencing a strange issue. When the site loads, all contents including paragraphs and videos from other pages are displayed under one tab (the HOME tab). However, once any other tab is clicked, the issue fixes itself. Yo ...

Can the HTML attributes produced by AngularJS be concealed from view?

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

leveraging Excel input for data manipulation in Java

I am looking to create a code that will help me generate a line of flight using data from an Excel spreadsheet. The process involves calculating the time between flights, ensuring the plane has enough time on the ground before taking off again, and determi ...

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

HTML5 - Adding Space to Main Section with a Two-column Layout

After spending 3 and a half hours racking my brain, I still can't figure out how to complete two seemingly simple tasks. First, I need to pad the outside of paragraph div, and secondly, I want to split the main section into two columns to add some lin ...

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

Leveraging personalized data-* attributes within the <template> tag in HTML5

I am currently developing a menu using a dom-repeat template as shown below: <template is="dom-repeat" items="{{appletsMenu}}"> <a data-route="{{item.dataRoute}}" href="{{item.href}}"> <iron-icon icon=" ...