Choose the initial offspring of the next tier

How can I specifically target the first div with the class .tGrid-item inside the div .tGrid-row-two using Sass? The :first-child selector seems to be selecting the first t-Grid-item of each .tGrid-row-two, which is not what I want.

I am utilizing Sass for this task.

Here is an example of the code:

<div class="tGrid">
  <div class="tGrid-row-four">
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        this is the one I want to select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        no select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
  </div>
  <div class="tGrid-row-four">
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        this is the one I want to select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        no select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
  </div>
</div>

Answer №1

If you want to target specific elements using the first-child selector, you can nest them like this:

.tGrid-row-two:first-child .tGrid-item:first-child { }

Keep in mind, as mentioned by @j08691, this will only apply if .tGrid-item is directly nested under .tGrid-row-two and there are no other sibling elements before it besides those with the .tGrid-item class.

.tGrid-row-two:first-child .tGrid-item:first-child {
  background:blue;
  color:#fff;
}
<div class="tGrid">
<div class="tGrid-row-four">
<div class="tGrid-row-two">
<div class="tGrid-item">
this is the one I want to select
</div>
<div class="tGrid-item">
no select
</div>
</div>
<div class="tGrid-row-two">
<div class="tGrid-item">
no select
</div>
<div class="tGrid-item">
no select
</div>
</div>
</div>
<div class="tGrid-row-four">
<div class="tGrid-row-two">
<div class="tGrid-item">
this is the one I want to select
</div>
<div class="tGrid-item">
no select
</div>
</div>
<div class="tGrid-row-two">
<div class="tGrid-item">
no select
</div>
<div class="tGrid-item">
no select
</div>
</div>
</div>
</div>

Answer №2

Essentially, it would look like this:

.tGrid-row-two:first-child .tGrid-item:first-child {
    color:red;
}
<div class="tGrid">
<div class="tGrid-row-four">
<div class="tGrid-row-two">
<div class="tGrid-item">
this is the one I want to choose
</div>
<div class="tGrid-item">
not selected
</div>
</div>
<div class="tGrid-row-two">
<div class="tGrid-item">
not selected
</div>
<div class="tGrid-item">
not selected
</div>
</div>
</div>
<div class="tGrid-row-four">
<div class="tGrid-row-two">
<div class="tGrid-item">
this is the one I want to choose
</div>
<div class="tGrid-item">
not selected
</div>
</div>
<div class="tGrid-row-two">
<div class="tGrid-item">
not selected
</div>
<div class="tGrid-item">
not selected
</div>
</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

Ways to alter the color of a link after clicking it?

Is there a way to change the link color when clicking on it? I have tried multiple approaches with no success. The links on this page are ajax-based and the request action is ongoing. <div class="topheading-right"> <span> ...

Creating personalized labels with Vue.js and Element UI radio button components

When using Element UI radio buttons on a form, I am attempting to personalize the label for each selection. Each radio button includes a prop called "label" where I can input my label text successfully. The problem arises when I need to apply a different s ...

Developing the pomofocus button feature

What is the best way to implement div classes that change on click? https://i.sstatic.net/TS3wh.gif I've attempted to add a border line, but it doesn't seem to work for me. border-width: 0 0 10px 0; The code above does not adjust the size of the ...

The Chrome iPhone emulator fails to accurately replicate the display of the iOS native environment

Recently, I created a simple portfolio page using a bootstrap template. The design includes a striking blue header with an animated gif featuring a parallax effect. Interestingly, the animation works perfectly on all devices except iPhones. Even when using ...

Is there a flaw in how Firefox handles text-overflow and inline-block?

It seems that according to the text-overflow specification, the ellipsis effect only applies to inline elements: This property defines how content within an inline element is displayed when it overflows its container's boundaries in the inline dire ...

Switching from a top to bottom position can be quite the challenge for many

If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise. I am looking to have a series of divs that enclose a sliding div within them. The sliding d ...

Preventing a Click Event from Firing in JavaScript DOM

Is there a way to deactivate my buttons once a certain condition is met? Whenever the score reaches 5 on either side, the game just keeps going without displaying the final score. I attempted using a while loop, but it caused crashes. Is there a simple met ...

Div over which scroll editing is performed

I want to develop a website where my title div remains fixed in one position as I scroll down. However, the issue arises when I set it to be fixed because my navigation button on the left disappears and I'm unsure how to keep it in place. // JavaSc ...

The page is set to 100% width, yet the content is not completely occupying the space provided

I'm currently working on creating a responsive website using HTML, CSS, and Bootstrap 4. However, I am encountering difficulties in making my carousel width fill up the entire screen of Pixel 2 XL (landscape - w: 823px) and iPad (portrait - w: 768px). ...

Show various Bootstrap Alert Messages based on the type of error detected?

Trying to figure out how best to explain this, here it goes! I am working on a website and I want to incorporate alert messages. Check out some examples here. Depending on the form inputs, I need different alerts to be displayed. PHP will validate the in ...

Is it possible for me to automatically add a line break following every image that is fetched from the Flickr API?

Hello there! I'm facing a little challenge with inserting a line break after each image that loads from the Flickr API. It's tricky to manipulate the style of data that hasn't loaded in the browser yet. I've experimented with using the ...

The jQuery script is compatible with all web browsers when offline and online, with the exception of Chrome when

Hi there, I've encountered a strange issue: Could you take a look at this newly uploaded page: On the page, there is a dropdown menu with various options (best viewed in Firefox or Safari). When users select a specific option, all other instances a ...

Displaying CSS source on a webpage using Polymer 2.0 style modules for sharing styles

I have implemented a style module using Polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules). The styles are functioning properly in Firefox, but in Chrome, the CSS content is displaying as jumbled characters on t ...

When a parent element uses the flex property and its child elements have no content, the flex child will expand

I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...

What causes my CSS to vanish when I float a div?

Struggling to design a responsive layout and encountering issues when floating a div to the left. I am facing difficulties with: HTML <body> <div class="wrapper"> <h1>Site Title</h1> <nav> < ...

Creating a unique custom theme for Twitter Bootstrap at 1200px and 980px screen sizes

Using the Twitter Bootstrap CSS framework, I have successfully created a custom navigation bar for desktop devices with a width of 1200 pixels and above. Now, I want to create similar navigation bars for other screen widths such as 980px, tablets, and phon ...

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

Div with CSS shadow on all sides

Is there a way to achieve this effect using only CSS (not CSS3) so that it is supported by all browsers? https://i.sstatic.net/XcWEh.png I am looking to create a div with shadows on all sides, where the top area will be used for navigation. I have tried s ...

Adaptive navigation bar featuring a drop-down menu and a branded logo placed strategically amidst sections

I'm having trouble making my navbar responsive. I want the links to collapse into a hamburger icon when the screen width is adjusted, displaying only the logo and hamburger icon with the links in portrait mode. The example at this link comes close to ...

Is there a way I can turn off the dragging functionality in my situation?

Is there a method to disable the dragging functionality within a draggable element? $('#dragitem').draggable({ scroll : false, drag: function(event, ui){ //check if condition is met if(� ...