Having difficulty generating a suitable CSS selector

Within a webpage, there are two types of links. One type includes both a class and itemprop, while the other type only contains a class. In the examples below, the first link has both class and itemprop, and the second link only has a class. If I want to create a selector that excludes links with "itemprop," what would that selector look like?

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name"></a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1"></a>

My attempt with the following selector selects all links:

a.business-name

When I tried this, it only selects links with itemprop:

a[itemprop="name"].business-name

Attempting to select only the class did not work with this selector:

a:not([itemprop="name"]).business-name
csscss-selectors

Answer №1

In my opinion, a slight syntax adjustment is required. This modification should suffice

a.company-title:not([itemprop="title"])

Answer №2

One approach commonly used is to leverage specificity and the cascade:

By assigning specificity, you are able to set the style for

a.business-name[itemprop]

to be the same as the style for

a

As you move further down the cascade, you can define a unique style for

a.business-name

Because the last selector is less specific, it will not override the more specific selector higher up the cascade.

a {
display: block;
line-height: 32px;
font-size: 16px;
}

a, a.business-name[itemprop] {
color: red;
font-weight: normal;
}

a.business-name {
color: green;
font-weight: bold;
}
<a href="#">Random Normal Link</a>

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name">Link with itemprop</a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1">Link without itemprop</a>

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

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

javascripthtmlcssbootstrap-5

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

javascripthtmlcss

Vertical alignment issue with icons in Bootstrap 5 HTML code

Just starting out with Css and I'm having trouble aligning the google icon vertically in the center with some padding from the bottom. You can see the issue in the attached file. The text is aligned in the center. .g-icon{ background-image: url(" ...

javascripthtmlcssbootstrap-4figma

Modify the text tone within a specific cell

Welcome to my unique webpage where I have implemented a special feature. The text highlighted in red represents the unique identifier for each individual cell. Interestingly, below there is an input field containing the code "0099CC", which corresponds to ...

javascriptcss

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Icon not appearing within the input group

Is there a way to design an input group that includes both a text field and an icon placed at the beginning of the text field? The code below demonstrates my attempted implementation, however, it appears that only the text field is visible without the acco ...

htmlcssinputiconsbootstrap-5

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

javascripthtmljquerycssjquery-ui-draggable

Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...

javascripthtmlcsswordpressxpath

What is the process of utilizing a <li> for a hover selector in jquery?

I've encountered an issue with a list that I am trying to modify its content when hovering over them. Despite using the id as a selector for triggering the hover function, all list items change color instead of just the intended one. The challenge lie ...

jqueryhtmlcss

The image inside an Ionic card's header will automatically adjust its size when text is added

Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...

cssionic-frameworksassionic3

I'm struggling to figure out why the CSS isn't working properly

i found this markup like shown here i am curious why it appears that lines 12 & 13 .notes:link span, .notes:visited span { ... seems to be functioning .comments span, background-position: -16px -16px; } .permalink:link span, .permalink:visited sp ...

css

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...

javascriptjquerycssjquery-animateslideshow

HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attem ...

htmlcss

The visibility of content that flickers on the webpage should be hidden with the display: none property during loading

Currently working on a new toy website, but encountering some unexpected behavior. On the homepage HTML file, there are two separate sets of <body> tags: <body class = "intro">...</body> <body class = "home">...</body& ...

javascripthtmlcss

Concealing the table border with the help of jQuery

I am working with a dynamically created tables in a ASP.NET repeater, where the number of tables can vary depending on the data retrieved from the database. Below is a sample markup along with the CSS and jQuery code. Please note that the tables are dynami ...

javascriptjqueryasp.netcss

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...

javacssjsf-2

Steps to include a horizontal divider in the footer section of an angular-material table

Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...

cssangularangular-material

The links are displaying on separate lines instead of being inline

There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...

htmlcss

Is there a way to leverage the extensive Bootstrap 5 color palette within an Angular application?

Currently working on a project in Angular 12 with Bootstrap 5 and SCSS, I'm facing a challenge in utilizing the new extended Bootstrap 5 color palette such as indigo-300 or pink-200. I'm not sure if I need to import them in a certain way or how t ...

cssangularsasscolorsbootstrap-5

Apply the CSS rule specifically for desktop screens, excluding mobile and tablet devices

My website has a logo in the header that appears too small on computer screens. I came across a code snippet that allows me to increase the size of the logo, but I only want this change to be applied on computers and not on mobile or tablet devices. The co ...

htmlcsswordpress