How can you target a custom tag using a wildcard in CSS?

Within my Angular application, I have various component pages such as <app-page-home>, <app-page-login>, <app-page-documentation>, etc. that are displayed when needed in the <router-outlet>.

I am facing a challenge where I want to style all these components collectively from a global stylesheet (./src/styles.styl), which is applied throughout the entire application. However, CSS does not support using wildcards for custom tags.

Instead of manually listing each tag one by one, I would prefer to use a wildcard approach like 

app-page-* { border : blue solid 1px; }

app-page-* {
   border : blue solid 1px;
}
<app-page-login>Login stuff</app-page-login>
<br>
<app-page-documentation>Documentation</app-page-documentation>

Unfortunately, I cannot assign classes (or can I?) since these components are dynamically mounted by the router. If adding classes was an option, I could easily use something like class="page".

Does anyone have suggestions on how to target custom tags with a wildcard? Thank you

htmlcssangular

Answer №1

Indeed, CSS does not support partial type wildcards. One simple workaround is to group the elements together as shown below:

app-page-login, app-page-documentation { border: 1px solid blue; }

Alternatively, you can add a class to each element like this:

<app-page-login class="app-page" />
<app-page-documentation class="app-page" />

Then target the class in your CSS:

.app-page { border: 1px solid blue; }

If adding classes is not an option, consider using attribute selectors, although I recommend sticking with the first two solutions for simplicity.

-- edit; It seems you are unable to add classes. In that case, go with the first solution provided.

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

JQuery and CSS Techniques for Changing the Size of a Div

I'm currently experimenting with JQuery and CSS to create a user-friendly navigation experience for users as they browse through a grid of variously-sized images. Essentially, my goal is to have the images expand when hovered over (which is functioni ...

jquerycsshtmlexpand

"Google Chrome v84 does not render elements with zero height, line-height, and display: flex correctly

In Google Chrome v84, there seems to be an issue with line-height and display: flex (Chrome v83 and FireFox are not affected). The height of the element is not always enforced properly. <div class="outer-wrapper"> <div class="wrap ...

htmlcssgoogle-chrome

Creating an HTML table from dynamic JSON data - A comprehensive guide

I am in need of a solution to transform JSON data into an HTML table format quickly and easily. Can anyone provide guidance on effectively utilizing PartialView to recursively render tables, ensuring that most details are visible? ...

c#htmljsonasp.net-mvc

What steps should be taken to avoid an event from occurring when an error message is encountered?

I have a dropdown list of cars where an error message is displayed if any of them becomes inactive. When the error message is shown, clicking on the Route Car button should prevent any event from occurring, i.e., no modal popup should be displayed. How ca ...

javascriptjqueryhtmlvalidationbootstrap-modal

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

Comparing Flexbox Wrapping Behavior in Chrome and Firefox

Hey there! I'm currently grappling with ensuring that this (3-3) flexbox layout appears consistently on both Chrome and Firefox browsers. If you'd like to see a functioning example of what I'm trying to achieve (three columns and two rows) ...

htmlcssflexbox

Unable to show custom marker icon on ngx-mapbox-gl Angular

I'm running into an issue with displaying a custom marker icon on a mapboxgl map within my Angular application. Despite following the examples meticulously, the custom icon simply won't display. Normal markers show up just fine, but specifying a ...

angularmapbox-gl

Utilizing Dynamic URLs in Kendo for Data Binding or Attributes on List Elements

I am facing an issue with routing two menu items conditionally using Kendo Jquery/MVVM. Originally, I had set the value in a data-href tag and it was displaying the URL correctly. However, I now need to dynamically load a URL based on certain conditions. T ...

htmljquerytypescriptmvvmkendo-ui

Is it possible for users to change months on a website using the Python calendar library?

Currently, I am in the process of developing a web application using Django. To create an HTML calendar, I am utilizing the Python calendar library. I am curious to know if there is a built-in method to enable users to switch between months while navigat ...

pythonhtmldjangocalendar

Send the user to the chosen option in the dropdown menu

My goal is to redirect the user based on the option they select. I am having an issue with my HTML code as it currently redirects to "example.com/page" instead of "example.com/page/1". Can someone please assist me in resolving this problem? <select clas ...

javascripthtmldropdown

Incorporate a horizontally rotating preloader to enhance loading experience

I am currently in the process of developing a preloader that rotates an image horizontally. After researching different threads and ideas, I came across a solution that looks something like this: <style> .imageRotateHorizontal{ -moz-anima ...

htmlcssanimation

Guide on automatically extracting table rows and generating an Excel spreadsheet

I am currently working on a script that dynamically adds the first row (TH) to a table and then exports it to an Excel sheet. However, I am facing an issue where instead of appending each row, the script keeps stacking on top of the next table row. Below ...

javascriptjqueryhtmlexcel

Guide on accessing device details with Angular2 and Typescript

I'm working on populating a table with details using TypeScript, but I need some assistance. 1. Device Name 2. Device OS 3. Location 4. Browser 5. IsActive I'm looking for a solution to populate these fields from TypeScript. Can anyone lend me ...

windowsangulartypescriptnavigator

Prevent the crawling of HTML segments by utilizing HTML-XSL parsing techniques

I am currently working with Watson Explorer FC 11.0.2 and I am facing a challenge in excluding certain HTML tags from the Watson crawlers. I am using an XSLT parser to extract metadata, title, and body from an HTML page located at the following path: "/h ...

htmlxmlxsltibm-watsonwatson-explorer

Is there a way to verify the presence or absence of content in a DNN template editor token?

I created a form where individuals can input data, and each field is assigned a token. For instance, if someone enters their name in a textbox labeled as "name," using the [NAME] token will display the entered name on another page. Currently, I am working ...

jqueryhtmltokendotnetnuke

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

Currently stuck in a tricky situation. I've implemented a custom form submission to prevent redirecting when an express route is triggered by form submission. However, the issue arises when I lose the data being sent without redirection. document.get ...

javascripthtmlexpressxmlhttprequest

What is the functionality of angular's @Attribute decorator?

Just starting out with Angular and diving into the world of decorators. While exploring the angular.io documentation, I found limited information on the @Attribute decorator. Can anyone provide me with some practical use cases for this? ...

angularangular2-decorators

Steps for using the ModelName.objects.filter method in HTML

I'm looking to streamline the amount of code needed in my view and aiming to achieve this directly in my HTML file: {% for committee in c %} {% for article in Article.objects.filter(committee=committee) %} <a class="post-link" hre ...

htmldjangodjango-models

Track your status with jQuery technology

I have a link: <a href="/test/number/3/phone/0">33df</a> Is there a way to determine if the words 'number' and 'phone' are present in this link? I am looking for a function similar to: check('number', ' ...

javascriptjqueryhtml

When deciding between .attribute=, setAttribute, and attr(), which is the best option to use?

.attribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.className = "list"; VS setAttribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.setAttribute("class","list"); VS .attr in Jquery $(" ...

javascriptjqueryhtml